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UNIT —5 : Basic Flutter Widgets 
1. Text Widget: 


A Text is a widget in Flutter that allows us to display a string of text with a single line in 
our application. Depending on the layout constraints, we can break the string across multiple 
lines or might all be displayed on the same line. If we do not specify any styling to the text 
widget, it will use the closest DefaultTextStyle class style. This class does not have any 
explicit style. In this article, we are going to learn how to use a Text widget and how to style 
it in our application. 


Here is a simple example to understand this widget. This example shows our project's title in 
the application bar and a message in the application's body. 


import 'package:flutter/material.dart’; 
void main() { runApp(MyApp()); } 
class MyApp extends StatelessWidget { 
@override 
Widget build(BuildContext context) { 
return MaterialApp( 
theme: ThemeData( 
primarySwatch: Colors.green, 
), 
10. home: MyTextPage() 
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15. @override 

16. Widget build(BuildContext context) { 

17. return Scaffold( 

18. appBar: AppBar( 

19. title:Text("Text Widget Example") 
20. ), 

21. body: Center( 

22. child:Text("Welcome to Javatpoint") 
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In the above code, we have used a MaterialApp widget that calls the home screen using 
the MyTextPage() class. This class contains the scaffold widget, which 
has appBar and body where we have used the Text widget to display the title and body, 
respectively. It is a simple scenario of Text widget where we have to pass the string that we 
want to display on our page. 


When we run this application in the emulator or device, we should get the UI similar to the 
below screenshot: 
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Text Widget Constructor: 
The text widget constructor used to make the custom look and feel of our text in Flutter 


1. const Text(String data, { 

2. Keykey, 

3 TextStyle style, 

4. StrutStyle strutStyle, 

5. TextAlign textAlign, 

6 TextDirection textDirection, 

7 TextOverflow overflow, 

8 bool softWrap, 

9 double textScaleFactor, 

10. int maxLines, 

11. String semanticsLabel, 

12. TextWidthBasis textWidthBasis, 
13. TextHeightBehavior textHeightBehavior 
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14. } 
15.) 


The following are the essential properties of the Text widget used in our application: 


TextAlign: It is used to specify how our text is aligned horizontally. It also controls the text 
location. 


TextDirection: It is used to determine how textAlign values control the layout of our text. 
Usually, we write text from left to right, but we can change it using this parameter. 


Overflow: It is used to determine when the text will not fit in the available space. It means we 
have specified more text than the available space. 


TextScaleF actor: It is used to determine the scaling to the text displayed by the Text widget. 
Suppose we have specified the text scale factor as 1.5, then our text will be 50 percent larger 
than the specified font size. 


SoftWrap: It is used to determine whether or not to show all text widget content when there 
is not enough space available. If it is true, it will show all content. Otherwise, it will not show 
all content. 


MaxLines: It is used to determine the maximum number of lines displayed in the text widget. 
TextWidthBasis: It is used to control how the text width is defined. 


TextHeightBehavior: It is used to control how the paragraph appears between the first line 
and descent of the last line. 


Style: It is the most common property of this widget that allows developers to styling their 
text. It can do styling by specifying the foreground and background color, font size, font 


weight, letter and word spacing, locale, shadows, etc. See the table to understand it more 
easily: 


Attributes Descriptions 
foreground It determines the paint as a foreground for the text. 
background It determines the paint as a background for the text. 
fontWeight It determines the thickness of the text. 


fontSize It determines the size of the text. 
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fontFamily Itis used to specify the typeface for the font. For this, we need to download 
a typeface file in our project, and then keep this file into the assets/font 
folder. Finally, config the pubspec.yaml file to use it in the project. 
fontStyle It is used to style the font either in bold or italic form. 
Color It is used to determine the color of the text. 
letterSpacing It is used to determine the distance between the characters of the text. 
wordSpacing Itis used to specify the distance between two words of the text. 
shadows It is used to paint underneath the text. 
decoration We use this to decorate text using the three parameters: decoration, 
decorationColor, decorationStyle. The decoration determines the location, 
decorationColor specify the color, decorationStyle determine the shape. 
1. import 'package:flutter/material.dart'; 
2: 
3. void main() { runApp(MyApp0O); } 
4. 
5. class MyApp extends Stateless Widget { 
6. @override 
7. Widget build(BuildContext context) { 
8. return MaterialApp( 
9. theme: ThemeData( 
10. primarySwatch: Colors.green, 
11. ), 
12. home: MyTextPage() 
13. ); 
14. } 
15e) 


16.class MyTextPage extends StatelessWidget { 
17. @override 

18. Widget build(BuildContext context) { 

19. return Scaffold( 

20.  appBar: AppBar( 

21. title:Text("Text Widget Example") 


P >; 


23. body: Center( 
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24. child:Text( 
25. "Hello World! This is a Text Widget.", 
26. style: TextStyle( 
21. fontSize: 35, 
28. color: Colors.purple, 
29. fontWeight: FontWeight.w700, 
30. fontStyle: FontStyle. italic, 
31. letterSpacing: 8, 
32. wordSpacing: 20, 
33. backgroundColor: Colors.yellow, 
34. shadows: [ 
35. Shadow(color: Colors.blueAccent, offset: Offset(2,1), blurRadius:10) 
36. ] 
37. ), 
38. ) 
39. ), 
40. ); 
41. } 
42.} 
Output: 


When we run this application in the emulator or device, we should get the UI similar to the 
below screenshot: 
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2. TextField Widget: 


A TextField or TextBox is an input element which holds the alphanumeric data, such as name, 
password, address, etc. It is a GUI control element that enables the user to enter text 
information using a programmable code. It can be of a single-line text field (when only one 
line of information is required) or multiple-line text field (when more than one line of 
information is required). 


TextField in Flutter is the most commonly used text input widget that allows users to collect 
inputs from the keyboard into an app. We can use the TextField widget in building forms, 
sending messages, creating search experiences, and many more. By default, Flutter decorated 
the TextField with an underline. We can also add several attributes with TextField, such as 
label, icon, inline hint text, and error text using an InputDecoration as the decoration. If we 
want to remove the decoration properties entirely, it is required to set the decoration to null. 


The following code explains a demo example of TextFiled widget in Flutter 


1. TextField ( 

2. decoration: InputDecoration( 
3 border: InputBorder.none, 
4.  labelText: "Enter Name’, 

5 hintText: 'Enter Your Name' 
6 

7 


©) 
-X 
Some of the most common attributes used with the TextField widget are as follows: 


o decoration: It is used to show the decoration around TextField. 

o border: It is used to create a default rounded rectangle border around TextField. 
o labelText: It is used to show the label text on the selection of TextField. 

o hintText: It is used to show the hint text inside TextField. 


o icon: It is used to add icons directly to the TextField. 
We are going to see how to use TextField widget in the Flutter app through the following steps: 
Step 1: Create a Flutter project in the IDE you used. Here, I am going to use Android Studio. 


Step 2: Open the project in Android Studio and navigate to the lib folder. In this folder, open 
the main.dart file and import the material.dart package as given below: 


1. import 'package:flutter/material.dart'; 
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Step 3: Next, call the main MyApp class using void main run app function and then create 
your main widget class named as MyApp extends with Stateful Widget: 


1. void main() => runApp( MyApp( ); 
2. 
3. class MyApp extends StatefulWidget { } 


Step 4: Next, we need to create the Scaffold widget -> Column widget in the class widget 
build area as given below: 


1. class MyApp extends StatefulWidget { 
2. @override 

3. Widget build(BuildContext context) { 
4 return Scaffold( 

5. appBar: AppBar( 

6 title: Text('Flutter TextField Example’), 
7 ), 

8 body: Padding( 

9 padding: Edgelnsets.all(15), 

10. child: Column( 

11. children: <Widget> [ 

12. 

13. ] 

14. ) 

15. ) 

16. ) 

17. ); 

18. } 

19.} 


Step 5: Finally, create the TextField widget as the below code. 


1. child: TextField( 

2 obscureText: true, 

3 decoration: InputDecoration( 
4. border: OutlineInputBorder(), 
D. labelText: 'Password', 

6 hintText: ‘Enter Password’, 

7 ), 

8 ), 





MOBILE APPLICATION DEVELOPMENT - 2 


Let us see the complete source code that contains the TextField Widget. This Flutter 
application takes two TextFields and one RaisedButton. After filling the details, the user 
clicks on the button. Since we have not specified any value in the onPressed () property of the 
button, it cannot print them to console. 


Replace the following code in the main.dart file and see the output. 


. import 'package:flutter/material.dart'; 


. void main() { 
runApp(MaterialApp( home: MyAppQ,)); 


1 

2 

3 

4 

5. } 
6. 
7. class MyApp extends StatefulWidget { 
8. @override 

9. _State createState() => _State(); 
12.class _ State extends State<MyApp> { 
13. @override 

14. Widget build(BuildContext context) { 


15. return Scaffold( 
16. appBar: AppBar( 


17. title: Text(Flutter TextField Example’), 
18. ), 

19. body: Padding( 

20. padding: Edgelnsets.all(15), 

21. child: Column( 

22. children: <Widget>[ 

23. Padding( 

24. padding: Edgelnsets.all(15), 

D5. child: TextField( 

26. decoration: InputDecoration( 
27. border: OutlineInputBorder(), 
28. labelText: 'User Name', 

29. hintText: ‘Enter Your Name’, 
30. ), 

31. ), 
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33. Padding( 
34. padding: Edgelnsets.all(15), 
35. child: TextField( 
36. obscureText: true, 
37. decoration: InputDecoration( 
38. border: OutlineInputBorder(), 
39. labelText: 'Password', 
40. hintText: 'Enter Password', 
41. ), 
42. ), 
43. ), 
44. RaisedButton( 
45. textColor: Colors.white, 
46. color: Colors.blue, 
47. child: Text(‘Sign In’), 
48. onPressed: (){ }, 
49. ) 
50. ], 
51. ) 
52. ) 
53. ); 
54. } 
55.} 
Output 


When we run the application in android emulator, we should get UI similar to the following 
screenshot: 
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If we click inside the text box, we can see that a keyboard has appeared from the bottom of the 
screen, the label goes into the top left corner of the border, and the hint text shown into the 
field. The below screenshot explains it more clearly: 
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How to retrieve the value of a TextField? 


We know that Flutter does not have an ID like in Android for the TextField widget. Flutter 
allows the user to retrieve the text in mainly two ways: First is the onChanged method, and 
another is the controller method. Both are discussed below: 


1. onChanged method: It is the easiest way to retrieve the text field value. This method store 
the current value in a simple variable and then use it in the TextField widget. Below is the 
sample example: 
1. String value = ""; 
2. TextField( 


10 — 
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3. onChanged: (text) { 

4. value = text; 

5. 2 

6. ) 

2. Controller method: It is a popular method to retrieve text field value 


using TextEditingController. It will be attached to the TextField widget and then listen to 
change and control the widget's text value. Below is the sample code: 


1. TextEditingController mycontroller = TextEditingController(); 
2. TextField( 

3. controller: mycontroller, 

4.) 


Sample code for listening to the changes. 


1. controller.addListener(() { 
2. //Do something here 
3. }}; 


Sample code to get or set the value. 


1. print(controller.text); // Print current value 
2. controller.text = "Demo Text"; // Set new value 


Let us see the second way in detail to retrieve the text field value in Flutter application with 
the help of following steps: 


1. Create a TextEditingController. 
2. Attach the TextEditingController to a TextField using controller property. 


3. Retrieve the value of the TextField by using the text() method provided by the 
TextEditingController. 


Now, create a new Flutter project in your IDE and open the main.dart file. Replace the below 


code in the main.dart file. In this example, we are going to display the alert dialog with the 
current value of the text field when the user taps on a button. 


= 
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. import 'package:flutter/material.dart'; 


. void main() { 
runApp(MaterialApp( home: MyAppQ,)); 


1 

2 

3 

4 

5. } 
6. 
7. class MyApp extends StatefulWidget { 

8. @override 

9. _State createState() => _State(); 

10.} 

11. 

12.class _State extends State<MyApp> { 

13. TextEditingController nameController = TextEditingController(); 

14. TextEditingController passwordController = TextEditingController(); 
15. @override 

16. Widget build(BuildContext context) { 

17. return Scaffold( 

18. appBar: AppBar( 


19. title: Text('Flutter TextField Example’), 
20. ), 

21. body: Padding( 

22. padding: Edgelnsets.all(15), 

23, child: Column( 

24. children: <Widget>[ 

25. Padding( 

26. padding: Edgelnsets.all(15), 

27. child: TextField( 

28. controller: nameController, 
29. decoration: InputDecoration( 
30. border: OutlineInputBorder(), 
31. labelText: 'User Name’, 

32. hintText: 'Enter Your Name', 
33. ), 

34. ), 

35. ), 

36. Padding( 

37. padding: Edgelnsets.all(15), 

38. child: TextField( 
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controller: passwordController, 
obscureText: true, 
decoration: InputDecoration( 
border: OutlineInputB order(), 
labelText: Password’, 
hintText: 'Enter Password’, 
), 
), 
), 
RaisedButton( 
textColor: Colors.white, 
color: Colors.blue, 
child: Text('Sign In’), 
onPressed: (){ 
return showDialog( 
context: context, 
builder: (context) { 
return AlertDialog( 
title: Text("Alert Message"), 
// Retrieve the text which the user has entered by 
// using the TextEditingController. 
content: Text(nameController.text), 
actions: <Widget>[ 
new FlatButton( 
child: new Text('OK), 
onPressed: () { 
Navigator.of(context).pop(); 
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77. ); 
78. } 
79.} 


Output: 


When we run the application in android emulator, we should get UI similar to the following 
screenshot: 
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Click inside the text box and add values, as shown in the field. When we press the sign-in 
button, an alert dialog box appeared containing the text that the user has entered into the field. 
If we click on the OK button, the alert dialog will disappear. Look into the below screenshot: 


Alert Message 
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How to make TextField expandable? 


Sometimes, we want to expand a TextField that means it can have more than one line. Flutter 
can do this very easily by adding the attributes maxLines and set it to null, which is one by 
default. We can also specify the exact value to expand the number of lines by default. 


1. TextField( 
2. maxLines: 4, 
3. ) 
How to control the size of TextField value? 


TextField widget also allows us to restrict the maximum number of characters inside the text 
field. We can do this by adding the maxLength attributes as below: 


1. TextField( 
2. maxLength: 10, 
1) 
How to obscure text field value? 


Obscure means to make the field not readable or not understandable easily. The obscure text 
cannot visible clear. In Flutter, it is mainly used with a text field that contains a password. We 
can make the value in a TextField obscure by setting the obscureText to true. 


1. TextField( 
2. obscureText: true, 
J Ds 
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3. Button Widget: 


Buttons are the graphical control element that provides a user to trigger an event such as 
taking actions, making choices, searching things, and many more. They can be placed 
anywhere in our UI like dialogs, forms, cards, toolbars, etc. 


Buttons are the Flutter widgets, which is a part of the material design library. Flutter provides 
several types of buttons that have different shapes, styles, and features. 


Features of Buttons 


The standard features of a button in Flutter are given below: 


1. We can easily apply themes on buttons, shapes, color, animation, and behavior. 
2. We can also theme icons and text inside the button. 


3. Buttons can be composed of different child widgets for different characteristics. 


Types of Flutter Buttons 


Following are the different types of button available in Flutter: 


o Flat Button 

o Raised Button 

o Floating Button 

o Drop Down Button 
o Icon Button 

o Inkwell Button 

o PopupMenu Button 


o Outline Button 


Let us discuss each button in detail. 


1. Flat Button 


It is a text label button that does not have much decoration and displayed without any 
elevation. The flat button has two required properties that are: child and onPressed(). It is 
mostly used in toolbars, dialogs, or inline with other content. By default, the flat button has no 
color, and its text is black. But, we can use color to the button and text using color and 
textColor attributes, respectively. 


Example: 


--10— 
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Open the main.dart file and replace it with the below code. 


import 'package:flutter/material.dart'’; 


void main() { 
runApp(MyApp()); 
} 


class MyApp extends Stateful Widget { 
@override 
_MyAppState createState() => _MyAppState(); 
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11. 

12.class _MyAppState extends State<MyApp> { 
13. @override 

14. Widget build(BuildContext context) { 

15. return MaterialApp( 

16. home: Scaffold( 


17. appBar: AppBar( 

18. title: Text('Flutter FlatButton Example’), 

19. + 

20. body: Center(child: Column(children: <Widget>[ 
21. Container( 

22; margin: Edgelnsets.all(25), 

23; child: FlatButton( 

24. child: Text('SignUp', style: TextStyle(fontSize: 20.0),), 
25. onPressed: () {}, 

26. ), 

27. ), 

28. Container( 

DO. margin: Edgelnsets.all(25), 

30. child: FlatButton( 

31. child: Text(‘LogIn’, style: TextStyle(fontSize: 20.0),), 
a2. color: Colors.blueAccent, 

33. textColor: Colors.white, 

34. onPressed: () {}, 

35. ), 

36. À 

37. ] 
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42.} 
Output: 


If we run this app, we will see the following screen: 








2. Raised Button 

It is a button, which is based on the material widget and has a rectangular body. It is similar 
to a flat button, but it has an elevation that will increases when the button is pressed. It adds 
dimension to the UI along Z-axis. It has several properties like text color, shape, padding, 
button color, the color of a button when disabled, animation time, elevation, etc. 

This button has two callback functions. 

onPressed(): It is triggered when the button is pressed. 


onLongPress(): It is triggered when the button is long pressed. 


It is to note that this button is in a disabled state if onPressed() and onLongPressed() callbacks 
are not specified. 


Example: 


Open the main.dart file and replace it with the below code. 


ne 


1 
2 
3 
4 
5. 
6 
7 
8 
9 


10.} 
11. 
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. import 'package:flutter/material.dart'; 


| void main() { 
runApp(MyApp0); 


. class MyApp extends Stateful Widget { 
@override 
_MyAppState createState() => _MyAppState(); 


12.class _MyAppState extends State<MyApp> { 
13. String msg = 'Flutter RaisedButton Example’; 
14. @override 

15. Widget build(BuildContext context) { 


return MaterialApp( 


home: Scaffold( 
appBar: AppBar( 
title: Text('Flutter RaisedButton Example’), 
), 
body: Container( 
child: Center( 
child: Column( 
mainAxisAlignment: MainAxisAlignment.center, 
children: [ 
Text(msg, style: TextStyle(fontSize: 30, fontStyle: FontStyle.italic),), 
RaisedButton( 
child: Text("Click Here", style: TextStyle(fontSize: 20),), 
onPressed: _changeText, 
color: Colors.red, 
textColor: Colors.yellow, 
padding: Edgelnsets.all(8.0), 
splashColor: Colors.grey, 
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39. ), 

40. ); 

41. } 

42. _changeText() { 

43. setState(() { 

44. if (msg.startsWith(F")) { 


45. msg = 'We have learned FlutterRaised button example"; 


46.  }else { 


47. msg = 'Flutter RaisedButton Example’; 


48. 
49. }); 
50. } 
51.} 


Output: 


When we run this example, it will give the below screenshot. If we click on the "Click Here" 
button, it will change the text message. Show the second screenshot. 
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Flutter RaisedButton Example 





We have learned FlutterRaised 


button example. 
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3. Floating Action Button 


A FAB button is a circular icon button that triggers the primary action in our application. It 
is the most used button in today's applications. We can use this button for adding, refreshing, 
or sharing the content. Flutter suggests using at most one FAB button per screen. There are 
two types of Floating Action Button: 


FloatingActionButton: It creates a simple circular floating button with a child widget inside 
it. It must have a child parameter to display a widget. 


FloatingActionButton.extended: It creates a wide floating button along with an icon and a 
label inside it. Instead of a child, it uses labels and icon parameters. 


Example: 


Open the main.dart file and replace it with the below code. 


. import 'package:flutter/material.dart'; 


. void main() { 
runApp(MyApp()); 


1 

2 

3 

4 

5. } 
6. 
7. class MyApp extends StatefulWidget { 

8. @override 

9. _MyAppState createState() => _MyAppState(); 
13. @override 

14. Widget build(BuildContext context) { 

15. return MaterialApp(home: Scaffold( 

16.. appBar: AppBar( 

17. title: Text("FAB Button Example"), 


18. backgroundColor: Colors.blue, 
19. actions: <Widget>[ 


20. IconButton(icon: Icon(Icons.camera_alt), onPressed: () => {}), 
21. IconButton(icon: Icon(Icons.account_circle), onPressed: () => {}) 
22, ], 

23. ), 


24. floatingActionButton: FloatingActionButton( 
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25. child: Icon(Icons.navigation), 
26. backgroundColor: Colors.green, 
27. foregroundColor: Colors.white, 
28. onPressed: () => {}, 

29.  ), 


30. /*floatingActionButton:FloatingActionButton.extended( 
31. onPressed: () {}, 

32. icon: Icon(Icons.save), 

33. label: Text("Save"), 

34. ),*/ 

35. ), 

36. ); 

37. } 

38. } 


Output: 
Run the application in android emulator, and it will give the UI similar to the following 


screenshot. The second image is an output of the FAB.extended button. Its coding can be seen 
in the above code's comment section. 
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4. DropDown Button 


A drop-down button is used to create a nice overlay on the screen that allows the user to select 
any item from multiple options. Flutter allows a simple way to implement a drop-down box or 
drop-down button. This button shows the currently selected item and an arrow that opens a 
menu to select an item from multiple options. 


Flutter provides a DropdownButton widget to implement a drop-down list. We can place it 
anywhere in our app. 


Example 


Open the main.dart file and replace it with the below code. 


. import 'package:flutter/material.dart'; 


1 

2, 

3. void main() => runApp(MaterialApp( 
4. home: MyAppQ, 

5. )); 

6. 

7. class MyApp extends StatefulWidget { 
8 
9 


@override 
_MyAppState createState() => _MyAppStateQ); 


11. 


13. List<ListItem> _dropdownltems = [ 
14. ListItem(1, "GeeksforGeeks"), 

15. ListItem(2, "Javatpoint"), 

16. Listltem(3, "tutorialandexample"), 
17. Listitem(4, "guru99") 

18. ]; 


20. List<DropdownMenultem<ListItem>> _dropdownMenultems; 
21. Listltem _itemSelected; 


23. void initState() { 

24. super.initState(); 

25. _dropdownMenultems = buildDropDownMenultems(_dropdownltems); 
26. _itemSelected = _dropdownMenultems[1].value; 
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28. 

29. List<DropdownMenultem<ListItem>> buildDropDownMenultems(List listItems) 
{ 

30. List<DropdownMenultem<ListItem>> items = List(); 

31. for (Listltem listItem in listItems) { 

32.  items.add( 

33. DropdownMenultem( 

34. child: Text(listItem.name), 

35. value: listItem, 

36. ), 

Si; ); 

38. } 

39. return items; 

40. } 

41. 

42. @override 

43. Widget build(BuildContext context) { 

44. return Scaffold( 

45. appBar: AppBar( 

46. title: Text("DropDown Button Example"), 

47. ), 

48. body: Column( 

49. children: <Widget>[ 


50. Padding( 

51. padding: const Edgelnsets.all(10.0), 
52. child: Container( 

53. padding: const EdgelInsets.all(5.0), 
54. decoration: BoxDecoration( 

55. color: Colors.greenAccent, 

56. border: Border.all()), 

57. child: DropdownButtonHideUnderline( 
58. child: DropdownButton( 

59. value: _itemSelected, 

60. items: _dropdownMenultems, 
61. onChanged: (value) { 

62. setState(() { 

63. _itemSelected = value; 

64. }); 
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68. ), 


74. } 

75. 

76.class ListItem { 

71. int value; 

78. String name; 

79. 

80. ListItem(this.value, this.name); 
81.} 


Output 


Run the application in android emulator, and it will give the UI similar to the following 
screenshot. The second image is an output of the list contains in the drop drown button. 
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5. Icon Button 


An IconButton is a picture printed on the Material widget. It is a useful widget that gives the 
Flutter UI a material design feel. We can also customize the look and feel of this button. In 
simple terms, it is an icon that reacts when the user will touch it. 


Example: 


Open the main.dart file and replace it with the below code. 


. import 'package:flutter/material.dart'; 


+ void main() => run App(MyApp0)); 


@override 
Widget build(BuildContext context) { 
return MaterialApp( 
home: Scaffold( 
10. appBar: AppBar( 
11. title: Text("Icon Button Example"), 


1 
2 
3 
4. 
5. class MyApp extends Stateless Widget { 
6 
7 
8 
9 
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12. ) 
13. body: Center( 
14. child: MyStatefulWidget(), 


18. } 

19.} 

20.double _speakervolume = 0.0; 

21. 

22.class MyStatefulWidget extends StatefulWidget { 
23. MyStatefulWidget({Key key }) : super(key: key); 


24. 

25. @override 

26. _MyStatefulWidgetState createState() => _MyStateful WidgetState(); 
27.} 

28. 


29.class _MyStatefulWidgetState extends State<MyStatefulWidget> { 
30. Widget build(BuildContext context) { 

31. return Column( 

32. mainAxisSize: MainAxisSize.min, 

33. children: <Widget>[ 

34. IconButton( 


35. icon: Icon(Icons.volume_up), 
36. iconSize: 50, 

37. color: Colors.brown, 

38. tooltip: 'Increase volume by 5', 
39. onPressed: () { 

40. setState(() { 

AA _speakervolume += 5; 

42. }); 

43. }, 

44, ), 

45. Text('Speaker Volume: $_speakervolume') 
46. ], 

47. ); 

48. } 

49.} 
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Output: 


Run the application in android emulator, and it will give the UI similar to the following 
screenshot. When we press the volume button, it will always increase by 5. 


=> 1 
10 © Os Vat 





icon Button Example 





4) 





6. Inkwell Button 

InkWell button is a material design concept, which is used for touch response. This widget 
comes under the Material widget where the ink reactions are actually painted. It creates the 
app UI interactive by adding gesture feedback. It is mainly used for adding splash ripple 
effect. 

Example: 


Open the main.dart file and replace it with the below code. 


. import 'package:flutter/material.dart'; 
. void main() => run App(MyApp()); 
@override 


_MyAppState createState() => _MyAppState(); 


1 
2 
3 
4. 
5. class MyApp extends StatefulWidget { 
6 
7 
8. } 

9 
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10.class _MyAppState extends State<MyApp> { 
11. int _volume = 0; 

12; 

13. @override 

14. Widget build(BuildContext context) { 

15. return MaterialApp( 

16. home: Scaffold( 

17. appBar: AppBar( 


18. title: Text(‘InkWell Button Example’), 
19. ), 
20. body: Center( 
21. child: new Column( 
22. mainAxisAlignment: MainAxisAlignment.center, 
23. children: <Widget>[ 
24. InkWell( 
25. splashColor: Colors. green, 
26. highlightColor: Colors.blue, 
27. child: Icon(Icons.ring_volume, size: 50), 
28. onTap: () { 
29. setState(() { 
30. _volume += 2; 
31. })s 
32; }, 
33. ), 
34. Text( 
35. _volume.toString(), 
36. style: TextStyle(fontSize: 50) 
37. à 
38. D 
39. D 
40. ), 
4i), 
42. ); 
43. } 
44.} 
Output: 
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Run the application in android emulator, and it will give the UI similar to the following 
screenshot. Every time we press the ring volume button, it will increase the volume by 2. 
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7. PopupMenu Button 


It is a button that displays the menu when it is pressed and then calls the onSelected method 
the menu is dismissed. It is because the item from the multiple options is selected. This button 
contains a text and an image. It will mainly use with Settings menu to list all options. It helps 
in making a great user experience. 

Example: 


Open the main.dart file and replace it with the below code. 


. import 'package:flutter/material.dart’; 
. void main() { runApp(MyApp();} 


@override 
_MyAppState createState() => _MyAppState(); 


1 
à 
3 
4. 
5. class MyApp extends Stateful Widget { 
6 
7 
8. } 

9 
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10.class _MyAppState extends State<MyApp> { 
11. Choice _selectedOption = choices[0]; 
12: 

13. void _select(Choice choice) { 

14. setState(() { 

15. _selectedOption = choice; 

16. }); 

17. + 

18. @override 

19. Widget build(BuildContext context) { 
20. return Material App( 

21. home: Scaffold( 

22, appBar: AppBar( 


23. title: const Text('PopupMenu Button Example’), 
24. actions: <Widget>[ 

25. PopupMenuButton<Choice>( 

26. onSelected: _select, 

27. itemBuilder: (BuildContext context) { 

28. return choices.skip(0).map((Choice choice) { 
29. return PopupMenultem< Choice>( 

30. value: choice, 

3L child: Text(choice.name), 

32. ); 

33. }).toList(); 

34. }, 

35. ), 

36. ], 

37. ), 

38. body: Padding( 

JO padding: const Edgelnsets.all(10.0), 

AO. child: ChoiceCard(choice: _selectedOption), 
4i. ), 

42. ), 

43. ); 

44. } 

45.} 

46. 


47.class Choice { 
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48. const Choice({this.name, this.icon }); 

49. final String name; 

50. final IconData icon; 

51.} 

52. 

53.const List<Choice> choices = const <Choice>[ 

54. const Choice(name: 'Wi-Fi', icon: Icons.wifi), 

55. const Choice(name: 'Bluetooth’, icon: Icons.bluetooth), 
56. const Choice(name: 'Battery', icon: Icons.battery_alert), 
57. const Choice(name: ‘Storage’, icon: Icons.storage), 
58.]; 

59. 

60.class ChoiceCard extends StatelessWidget { 

61. const ChoiceCard({Key key, this.choice}) : super(key: key); 
62. 

63. final Choice choice; 

64. 

65. @override 

66. Widget build(BuildContext context) { 

67. final TextStyle textStyle = Theme.of(context).textTheme.headline; 
68. return Card( 

69. color: Colors.greenAccent, 

70. child: Center( 

71. child: Column( 


72: mainAxisSize: MainAxisSize.min, 

73. crossAxisAlignment: CrossAxisAlignment.center, 
74. children: <Widget>[ 

75. Icon(choice.icon, size: 115.0, color: textStyle.color), 
76. Text(choice.name, style: textStyle), 

Bite ], 

78. ), 

79. ), 

80. ); 

81. } 
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Output: 





Run the application in android emulator, and it will give the UI similar to the following 
screenshot. When we click the three dots shown at the top left corner of the screen, it will pop 
up the multiple options. Here, we can select any option, and it will keep it in the card, as shown 
in the second image. 
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8. Outline Button 


It is similar to the flat button, but it contains a thin grey rounded rectangle border. Its outline 
border is defined by the shape attribute. 


Example: 


Open the main.dart file and replace it with the below code. 


. import 'package:flutter/material.dart'; 


1 
2, 
3. void main() { 

4. runApp(MyAppQ); 
5. } 

6 

7 


. class MyApp extends StatefulWidget { 
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8. @override 

9. _MyAppState createState() => _MyAppState(); 
10.} 

11. 

12.class_MyAppState extends State<MyApp> { 
13. @override 

14. Widget build(BuildContext context) { 

15. return MaterialApp( 

16. home: Scaffold( 


17. appBar: AppBar( 

18. title: Text('Outline Button Example’), 

19. ), 

20. body: Center(child: Column(children: <Widget>| 
21. Container( 

22. margin: Edgelnsets.all(25), 

23. child: OutlineButton( 

24. child: Text("Outline Button", style: TextStyle(fontSize: 20.0),), 
293. highlightedBorderColor: Colors.red, 

26. shape: RoundedRectangleBorder( 

27: borderRadius: BorderRadius.circular(15)), 
28. onPressed: () {}, 

29. ), 

30. ), 

31. Container( 

32. margin: EdgeInsets.all(25), 

33. child: FlatButton( 

34. child: Text(Flat Button’, style: TextStyle(fontSize: 20.0),), 
35. color: Colors.blueAccent, 

36. textColor: Colors.white, 

FR onPressed: () {}, 

38. ), 

39. ), 

40. ] 

41. )) 

42. ), 

43. ); 

44. } 

45.} 
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Output: 


Run the application in android emulator, and it will give the UI similar to the following 
screenshot. 
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Button Bar 


Flutter provides the flexibility to arrange the buttons in a bar or a row. ButtonBar widget 
contains three properties: alignment, children, and mainAxisSize. 


o Alignment is used to present the aligning option to the entire button bar widget. 
o Children attribute is used to take the number of buttons in a bar. 


o mainAxisSize attribute is used to provide the horizontal space for the button bar. 


Example: 


Open the main.dart file and replace it with the below code. 


. import 'package:flutter/material.dart'; 


1 
2. 
3. void main() { 

4. runApp(MaterialApp( home: MyAppdQ,)); 
5. } 

6 
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7. class MyApp extends Stateful Widget { 
8. @override 

9. _State createState() => _StateQ; 

10.} 

11. 

12.class _State extends State<MyApp> { 
13. @override 

14. Widget build(BuildContext context) { 
15. return Scaffold( 

16. appBar: AppBar( 


17. title: Text('Flutter ButtonBar Example’), 
18. ), 

19. body: Padding( 

20. padding: Edgelnsets.all(10), 

21. child: Column( 

22. children: <Widget>[ 

23: Padding( 

24. padding: EdgelInsets.all(15), 

25. child: new ButtonBar( 

26. mainAxisSize: MainAxisSize.min, 
27. children: <Widget>[ 

28. RaisedButton( 

29. child: new Text(‘Javatpoint’), 
30. color: Colors.lightGreen, 

31. onPressed: () {/** */}, 

32; ), 

33. FlatButton( 

34. child: Text('Flutter’), 

35. color: Colors.lightGreen, 

36. onPressed: () {/** */}, 

37. ), 

38. FlatButton( 

39. child: Text(MySQL'), 

40. color: Colors.lightGreen, 

41. onPressed: () {/** */}, 

42. ), 

43. ], 

44. ), 
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50. } 
51.} 


Output: 


Run the application in android emulator, and it will give the UI similar to the following 
screenshot. Here, we can see that the three buttons are placed in a horizontal bar or row. 
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4. Slider Widget: 


A slider in Flutter is a material design widget used for selecting a range of values. It is an 
input widget where we can set a range of values by dragging or pressing on the desired 
position. In this article, we are going to show how to use the slider widget in Flutter in 
setting the range of values and how to customize the look of a slider. 


Usually, we use the slider widget for changing a value. So, it is required to store the value 
in a variable. This widget has a slider class that requires the onChanged() function. This 
function will be called whenever we change the slider position. 


A slider can be used for selecting a value from a continuous or discrete set of values. By 
default, it uses a continuous range of values. If we want to use discrete values, we must 
have to use a non-null value for divisions. This discrete division indicates the number of 
discrete intervals. Before getting the value, we- have to set 
the minimum and maximum value. Slider provides min and max arguments to set the 
minimum and maximum limitations. For example, we have a set of values from 0.0 to 
50.0, and divisions are 10, the slider would take values like 0.0, 10.0, 20.0, 30.0, 40.0, and 
50.0. 


Slider Properties 


The following are the slider attributes used in Flutter 
. It has two required arguments, and all others are optional. 


Attributes Type Descriptions 

value double | It is a required argument and used to specify the slider's current value. 

onChanged double It is a required argument and called during dragging when the user 
selects a new value for the slider. If it is null, the slider is disabled. 

onChangedStart double | It is an optional argument and called when we start selecting a new 
value. 

onChangedStart double | Itis an optional argument and called when we have done in selecting a 
new value for the slider. 

max double | It is an optional argument and determines the maximum value that can 


be used by the user. By default, it is 1.0. It should be greater than or 
equal to min. 
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min double _ It is an optional argument that determines the minimum value that can 
be used by the user. By default, it is 0.0. It should be less than or equal 
to max. 

divisions int It determines the number of discrete divisions. If it is null, the slider is 
continuous. 

label string It specifies the text label that will be shown above the slider. It displays 


the value of a discrete slider. 


activeColor class It determines the color of the active portion of the slider track. 
Color 
inactiveColor class It determines the color of the inactive portion of the slider track. 
Color 
SemanticFormatterCallback It is a callback that is used to create a semantic value. By default, it is a 
percentage. 


The slider in Flutter uses the following terms: 

Thumb: It is a round shape that slides horizontally when we change values by dragging. 

Track: It is a horizontal line where we can slide the thumb. 

Overlay: It appears around the thumb while dragging. 

Tick marks: It is used to mark the discrete values of a slider. 

Value indicators: It will show the labels for the thumb values when we defined the labels. 
Active: It is the active side of the slider, which is in between the thumb and the minimum value. 


Inactive: |t is the inactive side of the slider, which is in between the thumb and the maximum value. 
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How to use the slider widget in Flutter? 
Here is the basic example of using a slider widget in Flutter. 


Slider( 
min: 0, 
max: 100, 
value: _value, 


1. 

2 

3 

4. 

5. onChanged: (value) { 
6 setState(() { 

7 _value = value: 

8 J; 

9 


10. ), 


Example 


Let us understand how to use the slider in Flutter with the help of an example. In the following code, 
we had stored the value as an integer that must be cast to double first when it passed as a value 
argument and then rounded to integer inside the onChanged method. We have also specified 
the active portion of the slider as green, while the inactive portion is orange. 


. import 'package:flutter/material.dart’; 


. void main() => runApp(MyApp(); 


. class MyApp extends StatelessWidget { 

@override 
Widget build(BuildContext context) { 

9. return MaterialApp( 

10. home: MySliderApp(), 

~~ |; 

12. } 

13.} 

14. 

15. class MySliderApp extends StatefulWidget { 

16. MySliderApp({Key key}) : super(key: key); 

17. 

18. @override 


1 
2 
3 
4 
5. // This Widget is the main application widget. 
6 
7 
8 
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19. _MySliderAppState createState() => _MySliderAppState(); 
20. } 

21. 

22. class _MySliderAppState extends State<MySliderApp> { 

23. int _value = 6; 

24. @override 

25. Widget build(BuildContext context) { 

26. return Scaffold( 

27. appBar: AppBar( 

28. title: Text('Flutter Slider Demo’), 


29. ), 

30. body: Padding( 

31. padding: Edgelnsets.all(15.0), 

32. child: Center( 

33. child: Row( 

34. mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
35. mainAxisSize: MainAxisSize.max, 

36. children: [ 

37. Icon( 

38. Icons.volume_up, 

39. size: 40, 

40. ), 

41. new Expanded( 

42. child: Slider( 

43. value: value.toDouble(), 

44. min: 1.0, 

45. max: 20.0, 

46. divisions: 10, 

47. activeColor: Colors.green, 

48. inactiveColor: Colors.orange, 

49. label: 'Set volume value', 

50. onChanged: (double newValue) { 

51. setState(() { 

52. _value = newValue.round(); 

53. )); 

54. } 

55. semanticFormatterCallback: (double newValue) { 
56. return '${newValue.round()} dollars'; 
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66. } 
Output: 


When we run this app in the IDE, we should get the UI similar to the below screenshot. Here we 
can drag the slider to set the volume label. 


Flutter Slider Demo 
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Flutter Range Slider 


It is a highly customizable component that selects a value from a range of values. It can be selected 
either from a continuous or discrete set of values. 


Why Range Slider? 


A slider component can provide single or multiple selections based on the continuous or discrete 
set of values. Here we must have to predetermine either a minimum or maximum value to adjust the 
selection in one direction. Unlike the slider, the range sliders allow two selection points that provide 
flexible adjustment to set the maximum and minimum value. This adjustment makes it a useful 
feature when we want to control a specific range, like indicating the length of time or price points. 


See the below code where range values are in the intervals of 10 because we have divided the slider 
into ten divisions from 0 to 100. It means our values are split between 0, 10, 20, 30, 40, and so on to 
100. Here, we will initialize the range values with 20 and 50. 


. import 'package:flutter/material.dart'; 


. void main() => runApp(MyApp(); 


. class MyApp extends StatelessWidget { 
@override 
Widget build(BuildContext context) { 
return MaterialApp( 

10. home: MySliderApp(), 

Wi. } 

12. } 

13.} 

14. 

15. class MySliderApp extends StatefulWidget { 

16. MySliderApp({Key key}) : super(key: key); 


1 
2 
3 
4. 
5. // This Widget is the main application widget. 
6 
7 
8 
9 


18. @override 

19. _MySliderAppState createState() => _MySliderAppState(); 

20. } 

21. 

22. class _MySliderAppState extends State<MySliderApp> { 

23. RangeValues _currentRangeValues = const RangeValues(20, 60); 
24. @override 
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. Widget build(BuildContext context) { 


return Scaffold( 
appBar: AppBar( 
title: Text('Flutter Range Slider Demo’), 
), 
body: Padding( 
padding: Edgelnsets.all(15.0), 
child: Center( 
child: Row( 
mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
mainAxisSize: MainAxisSize.max, 
children: [ 
Icon( 
Icons.volume_up, 
size: 40, 
), 
new Expanded( 
child: RangeSlider( 
values: _currentRangeValues, 
min: 0, 
max: 100, 
divisions: 10, 
labels: RangeLabels( 
_currentRangeValues.start.round().toString(), 
_currentRangeValues.end.round().toString(), 
} 
onChanged: (RangeValues values) { 
setState(() { 
_currentRangeValues = values; 
J; 
}, 
) 
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63. } 
64.} 


Output: 


When we run this app in the IDE, we should get the UI similar to the below screenshot. 





Flutter Range Slider Demo 
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Flutter Image Slider 


Image slider is a convenient way to display images, videos, or graphics in our app. Generally, it will 
show one big image at a time on our app screen. It helps to make our screen more attractive to the 
user. 


Let us see how we can make an image slider in Flutter. There are many dependencies available in 
the Flutter library to create a sliding image in your app. Here, we are going to use flutter_swipper 
dependency. So first, we need to add the below dependency in the puspec.yaml file: 


1. dependencies: 
2. flutter: 

3. sdk: flutter 
4 


flutter_swiper: “1.1.6 


Next, add this dependency in your dart file as below: 


1. import 'package:flutter_swiper/flutter_swiper.dart’; 
Example 


The following code explains the use of the flutter_swipper library in a simple way. Here, we have 
taken an image from the network that displays on the screen. 


. import 'package:flutter/material.dart’; 


. import 'package:flutter_swiper/flutter_swiper.dart’; 


1 
2 
3 
4. void main(){ runApp(MyApp(); } 

5. 

6. class MyApp extends StatelessWidget { 

7. @override 

8. Widget build(BuildContext context) { 

9. return MaterialApp( 

10. home: MyHomeScreen() 

11. % 

12. } 

13.} 

14. 

15. class MyHomeScreen extends StatelessWidget { 
16. @override 

17. Widget build(BuildContext context) { 

18 return Scaffold( 
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19. appBar: AppBar(title: Text("Flutter Image Slider Demo"),), 
20. body: Container( 


21. padding: Edgelnsets.all(10), 
22. margin: Edgelnsets.all(5), 

23. alignment: Alignment.center, 
24. constraints: BoxConstraints.expand( 
25. height: 225 

26. ), 

27. child: imageSlider(context)), 
28. ) 

29. } 

30. } 

31. 


32. Swiper imageSlider(context){ 

33. return new Swiper( 

34. autoplay: true, 

35. itemBuilder: (BuildContext context, int index) { 

36. return new Image.network( 

37. "https://1h3.googleusercontent.com/wlcl3tehFmOUpq- 
JI3ZhIVbZVFrLHePRtIDWV5IZwBVDr7kEAgLTChyvXUcIMVQDRHDEcDhY=w640-h400-e365-rj- 
scOxOOffffff", 

38. fit: BoxFit.fitHeight, 

39. ); 

40. }, 

41. itemCount: 10, 

42.  viewportFraction: 0.7, 

43. scale: 0.8, 

44. ); 

45.} 


Output: 


When we run this app in the IDE, we should get the UI similar to the below screenshot. Here 
the image slides automatically. 
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5. Checkbox Widget: 


A checkbox is a type of input component which holds the Boolean value. It is a GUI element that 
allows the user to choose multiple options from several selections. Here, a user can answer 
only in yes or no value. A marked/checked checkbox means yes, and an unmarked/unchecked 
checkbox means no value. Typically, we can see the checkboxes on the screen as a square 
box with white space or a tick mark. A label or caption corresponding to each checkbox 
described the meaning of the checkboxes. 


In this article, we are going to learn how to use checkboxes in Flutter. In Flutter, we can have two 
types of checkboxes: a compact version of the Checkbox named "checkbox" and 
the "CheckboxListTile" checkbox, which comes with header and subtitle. The detailed 
descriptions of these checkboxes are given below: 


Checkbox: 
Attributes Descriptions 
value It is used whether the checkbox is checked or not. 
onChanged It will be called when the value is changed. 
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Tristate It is false, by default. Its value can also be true, false, or null. 
activeColor It specified the color of the selected checkbox. 
checkColor It specified the color of the check icon when they are selected. 
materialTapTargetSize It is used to configure the size of the tap target. 

Example: 


Below is the demo example of checkbox: 


1. Checkbox( 

2. value: this.showvalue, 

3. onChanged: (bool value) { 
4 setState(() { 

5; this.showvalue = value; 
6 }); 

7 

8 


Let us write the complete code to see how checkbox is displayed in Flutter. First, create a project in 
android studio, open the main.dart file, and replace the code given below: 


. import 'package:flutter/material.dart'; 


. void main() { 
runApp(MaterialApp( home: MyHomePage(),)); 


1 

2 

3 

4 

5. } 
6. 

7. class MyHomePage extends StatefulWidget { 

8. @override 

9. _HomePageState createState() => _HomePageState(); 
10. } 

11. 

12. class _HomePageState extends State<MyHomePage> { 
13. bool valuefirst = false; 

14. bool valuesecond = false; 


15. 
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16. @override 

17. Widget build(BuildContext context) { 

18. return MaterialApp( 

19. home: Scaffold( 

20. appBar: AppBar(title: Text('Flutter Checkbox Example’),), 
21. body: Container( 


22. 

23. child: Column( 

24. children: <Widget>[ 

25. Row( 

26. children: <Widget>[ 

27. SizedBox(width: 10,), 

28. Text('Checkbox without Header and Subtitle: ‘style: TextStyle(fontSize: 17.0), ), 
29. Checkbox( 

30. checkColor: Colors.greenAccent, 
31. activeColor: Colors.red, 
32. value: this.valuefirst, 

33. onChanged: (bool value) { 
34. setState(() { 

35. this.valuefirst = value; 
36. J; 

37. } 

38. ), 

39. Checkbox( 

40. value: this.valuesecond, 
41. onChanged: (bool value) { 
42. setState(() { 

43. this.valuesecond = value; 
44. }; 

45. }, 

46. J 

47. ], 

48. ), 

49. ], 

50. ) 

51. ), 

52.. ), 

53. à 
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54. } 
55.} 


Output 


Now execute the app in the emulator or device, we will see the below screen: 


eiat 
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7. Radio Widget: 


A radio button is also known as the options button which holds the Boolean value. It allows the 
user to choose only one option from a predefined set of options. This feature makes it different 
from a checkbox where we can select more than one option and the unselected state to be 
restored. We can arrange the radio button in a group of two or more and displayed on the 
screen as circular holes with white space (for unselected) or a dot (for selected). We can also 
provide a label for each corresponding radio button describing the choice that the radio button 
represents. A radio button can be selected by clicking the mouse on the circular hole or using a 
keyboard shortcut. 


In this section, we are going to explain how to use radio buttons in Flutter. Flutter allows us to 
use radio buttons with the help of 'Radio', 'RadioListTile', or 'ListTitle' Widgets. 





The flutter radio button does not maintain any state itself. When we select any radio option, it 
invokes the onChanged callback and passing the value as a parameter. If the value 
and groupValue match, the radio option will be selected. 


Let us see how we can create radio buttons in the Flutter app through the following steps: 
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Step 1: Create a Flutter project in the IDE. Here, | am going to use Android Studio. 


Step 2: Open the project in Android Studio and navigate to the lib folder. In this folder, open 
the main.dart file and create a RadioButtonWidget class (Here: MyStatefulWidget). Next, we will 
create the Column widget and put three RadioListTile components. Also, we will create a Text widget 
for displaying the selected item. The ListTitle contains the following properties: 


groupValue: It is used to specify the currently selected item for the radio button group. 
title: It is used to specify the radio button label. 
value: It specifies the backend value, which is represented by a radio button. 


onChanged: It will be called whenever the user selects the radio button. 


ListTile( 
title: const Text(‘www.javatpoint.com’), 
leading: Radio( 


value: BestTutorSite javatpoint, 


onChanged: (BestTutorSite value) { 
setState(() { 
_site = value; 
9. J; 
10. } 
11. ), 
12. ), 


1 
2 
3 
4 
5.  groupValue: site, 
6 
7 
8 


Let us see the complete code of the above steps. Open the main.dart file and replace the following 
code. 


Here, the Radio widgets wrapped in ListTiles and the currently selected text is passed into 
groupValue and maintained by the example's State. Here, the first Radio button will be selected off 
because _site is initialized to BestTutorSite.javatpoint. If the second radio button is pressed, the 
example's State is updated with setState, updating _site to BestTutorSite.w3schools. It rebuilds 
the button with the updated groupValue, and therefore it will select the second button. 


. import ‘package:flutter/material.dart'; 


1 
2. 
3. void main() => runApp(MyApp()); 
4. 
5. /// This Widget is the main application widget. 
6. class MyApp extends StatelessWidget { 
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7. static const String _title = ‘Radio Button Example’; 


9. @override 

10. Widget build(BuildContext context) { 

11. return MaterialApp( 

12, title: _title, 

13. home: Scaffold( 

14. appBar: AppBar(title: const Text(_title)), 
15. body: Center( 

16. child: MyStatefulWidget(), 


23. enum BestTutorSite { javatpoint, w3schools, tutorialandexample } 


25. class MyStatefulWidget extends StatefulWidget { 
26. MyStatefulWidget({Key key}) : super(key: key); 


28. @override 

29. _MyStatefulWidgetState createState() => _MyStatefulWidgetState(); 
30. } 

31. 

32. class _MyStatefulWidgetState extends State<MyStatefulWidget> { 
33. BestTutorSite _site = BestTutorSite.javatpoint; 


35. Widget build(BuildContext context) { 
36. return Column( 
37. children: <Widget>[ 


38. ListTile( 

39. title: const Text('www.javatpoint.com'), 
40. leading: Radio( 

41. value: BestTutorSite.javatpoint, 

42. groupValue: _site, 

43. onChanged: (BestTutorSite value) { 
44. setState(() { 
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45. _site = value; 
46. }); 
47. }, 
48. À 
49. ), 
50. ListTile( 
51. title: const Text(‘www.w3school.com’), 
52. leading: Radio( 
53. value: BestTutorSite.w3schools, 
54. groupValue: _site, 
55. onChanged: (BestTutorSite value) { 
56. setState(() { 
57. _site = value; 
58. }); 
59. }, 
60. ), 
61. ), 
62. ListTile( 
63. title: const Text('www.tutorialandexample.com’), 
64. leading: Radio( 
65. value: BestTutorSite.tutorialandexample, 
66. groupValue: _site, 
67. onChanged: (BestTutorSite value) { 
68. setState(() { 
69. _site = value; 
70. }); 
71. y 
72. ), 
73. ), 
TA. ], 
K5. % 
76. } 
77.} 
Output 


When we run the app, the following output appears. Here, we have three radio buttons, and only 
one is selected by default. We can also select any other option. 
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8. Progress Bar Widget: 
A progress bar is a graphical control element used to show the progress of a task such as 
downloading, uploading, installation, file transfer, etc. In this section, we are going to understand 


how to show a progress bar in a flutter application. 


Flutter can display the progress bar with the help of two widgets, which are given below: 


1. LinearProgressindicator 
2. CircularProgressindicator 


Let us understand it in detail. 

LinearProgressIndicator 

The linear progress bar is used to show the progress of the task in a horizontal line. 
Flutter provides mainly two types of linear progress indicators: 


Determinate: Determinate progress bar indicates the actual amount of progress at each point in 
making the task. Its value will increase monotonically from 0.0 to 1.0 to show the amount of task 
completed at that time. We need to use a non-null value from 0.0 to 1.0 for creating a determinate 
progress indicator. 


Indeterminate: Indeterminate progress bar does not indicate the amount of progress in completing 
the task. It means we do not know when the task is finished. It makes progress without indicating 
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how much progress remains. We can make an indeterminate progress indicator by using 
a null value. 


Properties 
The following are the most common attributes of linear progress indicator: 


double value: It is used to specify the non-null value between 0.0 to 1.0, representing the 
completion of task progress. 


Color backgroundColor: It is used to specify the background color of the widget. 


Animation<Color> valueColor: It is used to specify the progress indicator's color as an animated 
value. 


Example 


The following code explains the use of anindeterminate linear progress bar that shows a 
download where we do not know when it will be finished. A floating button is used to change the 
state from not downloading to downloading. When there is no downloading, it shows a text; 
otherwise, it will show the progress indicator: 


. import 'package:flutter/material.dart'; 


. void main() => runApp(MyApp(); 


1 
2 
3 
4. 
5. class MyApp extends StatelessWidget { 
6. @override 

7. Widget build(BuildContext context) { 

8 return MaterialApp( 

9 home: LinearProgressindicatorApp(), 


10. y; 


13. 

14. class LinearProgressIndicatorApp extends StatefulWidget { 
15. @override 

16. State<StatefulWidget> createState() { 

17. return LinearProgressIndicatorAppState(); 
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21. class LinearProgressindicatorAppState extends State<LinearProgressindicatorApp> { 
22. bool _loading; 

23. 

24. @override 

25. void initState() { 

26. super.initState(); 

27. _loading = false; 

28. } 


30. @override 

31. Widget build(BuildContext context) { 

32. return Scaffold( 

33. appBar: AppBar( 

34. title: Text("Flutter Linear Progress Bar"), 
35. +} 

36. body: Center( 

37. child: Container( 


38. padding: Edgelnsets.all(12.0), 

39. child: loading ? LinearProgressindicator() : Text( 
AO. "Press button for downloading", 

41. style: TextStyle(fontSize: 25)), 

42. ), 

43. ), 


44.  floatingActionButton: FloatingActionButton( 
45. onPressed: () { 

46. setState(() { 

A7. _loading = !_loading; 

48. }); 

49. k 

50. tooltip: ‘Download’, 

51. child: Icon(Icons.cloud_download), 


55.} 
Output: 


Now, run the app in your IDE. We can see the UI of the screen as below screenshot. 
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When we press the floating button, it changes the state from not downloading to downloading and 
shows the progress indicator like the below screenshot: 
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Sometimes we want to make a determinate progress bar that means we will show how long it will 
take time to finish the task. In that case; we can simulate a download that will take time to finish the 
task and updates the value of LinearProgressindicator as follows: 


. import 'dart:async'; 
. import 'package:flutter/material.dart'; 


1 
2 
3. 
4. void main() => runApp(MyApp()); 

5. 

6. class MyApp extends StatelessWidget { 

7. \@override 

8. Widget build(BuildContext context) { 

9 return MaterialApp( 

10. home: LinearProgressindicatorApp(), 

11. 

12. } 

13.} 

14. 

15. class LinearProgressindicatorApp extends StatefulWidget { 
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16. @override 

17. State<StatefulWidget> createState() { 

18. return LinearProgressIndicatorAppState(); 

19. } 

20. } 

21. 

22. class LinearProgressindicatorAppState extends State<LinearProgressindicatorApp> { 
23. bool _loading; 

24. double _progressValue; 


26. @override 

27. void initState() { 

28. super.initState(); 

29. _loading = false; 

30. _progressValue = 0.0; 

31. } 

32. @override 

33. Widget build(BuildContext context) { 
34. return Scaffold( 

35. appBar: AppBar( 

36. title: Text("Flutter Linear Progress Bar"), 
af. 

38. body: Center( 

39. child: Container( 


AO. padding: Edgelnsets.all(12.0), 

41. child: loading 

42. ? Column( 

43. mainAxisAlignment: MainAxisAlignment.center, 

44. children: <Widget>[ 

45. LinearProgressindicator( 

46. backgroundColor: Colors.cyanAccent, 

47. valueColor: new AlwaysStoppedAnimation<Color>(Colors.red), 
48. value: _progressValue, 

49. ), 

50. Text('${(_progressValue * 100).round()}%’), 

51. ], 

52. ) 

53. : Text("Press button for downloading", style: TextStyle(fontSize: 25)), 
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56.  floatingActionButton: FloatingActionButton( 
57. onPressed: () { 


58. setState(() { 

59. _loading = !_loading; 

60. _updateProgress(); 

61. }); 

62. } 

63. tooltip: ‘Download’, 

64. child: Icon(Icons.cloud_download), 
65. ), 

66. ); 

67. } 


68. // this function updates the progress value 
69. void _updateProgress() { 

70. const oneSec = const Duration(seconds: 1); 
71. new Timer.periodic(oneSec, (Timer t) { 

72. setState(() { 


73. _progressValue += 0.1; 
74. // we "finish" downloading here 
75. if (_progressValue.toStringAsFixed(1) == ‘1.0') { 
76. _loading = false; 
77. t.cancel(); 
78. return; 
79. } 
80. X; 
81. X; 
82. } 
BER), 
Output: 


Now, run the app in your IDE. When we press the button, it changes the state from not downloading 
to downloading and shows how much progress is finished at that time like the below screenshot: 
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CircularProgressIndicator 


It is a widget, which spins to indicate the waiting process in your application. It shows the progress 
of a task in a circular shape. It also displays the progress bar in two ways: Determinate and 
Indeterminate. 


A determinate progress bar is used when we want to show the progress of ongoing tasks such as 
the percentage of downloading or uploading files, etc. We can show the progress by specifying the 


value between 0.0 and 1.0. 


An indeterminate progress bar is used when we do not want to know the percentage of an 
ongoing process. By default, CircularProgressindicator shows the indeterminate progress bar. 


Example 

In the below example, we will see the circular progress indicator in an indeterminate mode that 
does not show any task's progress. It displays the circles continuously, which indicates that 
something is being worked out, and we have to wait for its completion. For this, there is no need to 


specify any value to the CircularProgressindicator() constructor. See the following code: 


1. import 'package:flutter/material.dart’; 
2. 
3. void main() => runApp(MyApp()); 
4 
5 


. class MyApp extends StatelessWidget { 
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6. @override 

7. Widget build(BuildContext context) { 

8 return MaterialApp( 

9. home: Scaffold( 

10. appBar: AppBar( 

11. title: Text('Flutter Progress Bar Example’), 
12. ), 

13. body: Center( 

14. child: CircularProgressIndicatorApp() 


16. ), 

17. +} 

18. } 

19.} 

20. 

21. /// This is the stateless widget that the main application instantiates. 
22. class CircularProgressindicatorApp extends StatelessWidget { 
23. @override 

24. Widget build(BuildContext context) { 

25. return CircularProgressindicator( 

26. backgroundColor: Colors.red, 

27.  strokeWidth: 8,); 

28. } 

29. } 


Output: 


Now, run the app in your IDE. We will see the output of the flutter circular progress indicator like the 
below screenshot: 
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Sometimes you want to make a determinate circular progress bar to show how much it will take 
time to finish the task. In that case, we can simulate a download that will take time to finish the task 
and updates the value of CircularProgressindicator as follows: 


. import ‘dart:async’; 


. import 'package:flutter/material.dart'; 


1 
2 
3 
4. void main() => runApp(MyApp(); 

5. 

6. class MyApp extends StatelessWidget { 

7. @override 

8. Widget build(BuildContext context) { 

9. return MaterialApp( 

10. home: CircularProgressIndicatorApp(), 

ye. ? 

12. } 

13.} 

14. 

15. class CircularProgressindicatorApp extends Stateful Widget { 
16. @override 

17. State<StatefulWidget> createState() { 


18. return CircularProgressindicatorAppState(); 
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19. } 

20. } 

21. 

22. class CircularProgressindicatorAppState extends State<CircularProgressIndicatorApp > { 
23. bool _loading; 

24. double _progressValue; 

25. 

26. @override 

27. void initState() { 

28. super.nitState(); 

29. _loading = false; 

30. _progressValue = 0.0; 

31. } 

32. @override 

33. Widget build(BuildContext context) { 
34. return Scaffold( 

35. appBar: AppBar( 

36. title: Text("Flutter Circular Progress Bar"), 
37. ), 

38. body: Center( 

39. child: Container( 


40. padding: Edgelnsets.all(14.0), 

41. child: loading 

42. ? Column( 

43. mainAxisAlignment: MainAxisAlignment.center, 

44. children: <Widget>[ 

45. CircularProgressindicator( 

46. strokeWidth: 10, 

A7. backgroundColor: Colors.yellow, 

48. valueColor: new AlwaysStoppedAnimation<Color>(Colors.red), 
49. value: _progressValue, 

50. À, 

51. Text('${(_progressValue * 100).round()}%’), 

52. ], 

53. ) 

54. : Text("Press button for downloading", style: TextStyle(fontSize: 25)), 
55. ), 

56. ), 
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57.  floatingActionButton: FloatingActionButton( 
58. onPressed: () { 

59. setState(() { 

60. _loading = !_loading; 

61. _updateProgress(); 

62. }); 

63. }, 

64. child: Icon(Icons.cloud_download), 

65. ), 

66. y 

67. } 

68. // this function updates the progress value 
69. void _updateProgress() { 

70. const oneSec = const Duration(seconds: 1); 
71. new Timer.periodic(oneSec, (Timer t) { 
72. setState(() { 


73. _progressValue += 0.2; 
74. // we "finish" downloading here 
75. if (_progressValue.toStringAsFixed(1) == 1.0") { 
76. _loading = false; 
77. t.cancel(); 
78. return; 
79. } 
80. }) 
81. }); 
82. } 
83.} 
Output: 


Now, run the app in your IDE. When we press the button, it shows how much progress is finished at 
that time like the below screenshot: 
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9. Flutter Lists: 


Lists are the most popular elements of every web or mobile application. They are made up of multiple 
rows of items, which include text, buttons, toggles, icons, thumbnails, and many more. We can use 
it for displaying various information such as menus, tabs, or to break the monotony of pure text files. 


In this section, we are going to learn how we can work with Lists in the Flutter. Flutter 
allows you to work with Lists in different ways, which are given below: 


o Basic Lists 
o Long Lists 
o Grid Lists 


o Horizontal Lists 


Let us see all the above lists one by one. 
Basic Lists 


Flutter includes a ListView widget for working with Lists, which is the fundamental concept of 
displaying data in the mobile apps. The ListView is a perfect standard for displaying lists that contains 
only a few items. ListView also includes ListTitle widget, which gives more properties for the visual 
structure to a list of data. 


The following example displays a basic list in the Flutter application. 
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. import 'package:flutter/material.dart'; 


. void main() => runApp(MyApp(); 


1 
2 
3 
4. 
5. class MyApp extends StatelessWidget { 
6. @override 

7. Widget build(BuildContext context) { 

8 final appTitle = ‘Flutter Basic List Demo’; 
10. return MaterialApp( 

11. title: appTitle, 

12. home: Scaffold( 

13. appBar: AppBar( 


14. title: Text(appTitle), 

15. J; 

16. body: ListView( 

17. children: <Widget>[ 

18. ListTile( 

19. leading: Icon(Icons.map), 
20. title: Text('Map'), 

21. ), 

22. ListTile( 

23. leading: Icon(Icons.photo_album), 
24. title: Text(‘Album)), 

25. ), 

26. ListTile( 

27. leading: Icon(Icons.phone), 
28. title: Text('Phone'), 

29. ), 

30. ListTile( 

31. leading: Icon(Icons.contacts), 
32. title: Text('Contact'), 

33. ), 

34. ListTile( 

35. leading: Icon(Icons.settings), 
36. title: Text('Setting'), 

37. ), 
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42. } 
43.} 


Output 


Now, run the app in Android Studio. You can see the following screen in your emulator or connected 
device. 
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Working with Long Lists 


Sometimes you want to display a very long list in a single screen of your app, then, in that case, the 
above method for displaying the lists is not perfect. To work with a list that contains a very large 
number of items, we need to use a ListView.builder() constructor. The main difference between 
ListView and ListView.builder is that ListView creates all items at once, whereas the ListView.builder() 
constructor creates items when they are scrolled onto the screen. 


Let us see the following example. Open the main.dart file and replace the following code. 
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import 'package:flutter/material.dart’; 


void main() { 
runApp(MyApp( 
products: List<String>.generate(500, (i) => “Product List: $i"), 
)} 
} 


9o NaNe WRN pa 


Lo 


class MyApp extends StatelessWidget { 


. final List<String> products; 


= o 
— © 


MyApp({Key key, @required this.products}) : super(key: key); 


—_ — 
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14. @override 
15. Widget build(BuildContext context) { 
16. final appTitle = ‘Flutter Long List Demo’; 


18. return MaterialApp( 

19. title: appTitle, 

20. home: Scaffold( 

21. appBar: AppBar( 

22. title: Text(appTitle), 

23. ), 

24. body: ListView.builder( 

25. itemCount: products.length, 
26. itemBuilder: (context, index) { 
27. return ListTile( 

28. title: Text('${products[index]}'), 
29. ); 
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In the above code, the itemCount gives how many numbers of items you want to display in a list. 
The itemBuilder tells about where you want to return the item that you want to display. 


Output 


Now, run the app in Android Studio. You will get the following screen where you can see all product 
list by scrolling onto the screen. 
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Creating a Grid Lists 


Sometimes we want to display the items in a grid layout rather than the normal list that comes one 
after next. A GridView widget allows you to create a grid list in Flutter. The simplest way to create a 
grid is by using the GridView.count() constructor, which specifies the number of rows and columns 
in a grid. 


Let us see the following example of how GridView works in Flutter for creating grid lists. Open the 
main.dart file and insert the following code. 


. import 'package:flutter/material.dart'; 
. void main( {runApp(MyApp();} 
@override 


Widget build(BuildContext context) { 


1 
2 
3 
4. 
5. class MyApp extends StatelessWidget { 
6 
7 
8 final appTitle = "Flutter Grid List Demo"; 
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9. 

10. return MaterialApp( 

11. title: appTitle, 

12. home: Scaffold(appBar: AppBar( 

13. title: Text(appTitle), 

14. ), 

15. body: GridView.count( 

16. crossAxisCount: 3, 

17. children: List.generate(choices.length, (index) { 
18. return Center( 

19. child: SelectCard(choice: choices[index]), 
20. ); 

21. } 

22. ) 

23. ) 

24. ) 

25. X 

26. } 

27.} 

28. 


29. class Choice { 

30. const Choice({this.title, this.icon}); 

31. final String title; 

32. final IconData icon; 

33.} 

34. 

35. const List<Choice> choices = const <Choice>[ 
36. const Choice(title: 'Home’, icon: Icons.home), 

37. const Choice(title: ‘Contact’, icon: Icons.contacts), 
38. const Choice(title: ‘Map’, icon: Icons.map), 

39. const Choice(title: ‘Phone’, icon: Icons.phone), 
40. const Choice(title: ‘Camera’, icon: Icons.camera_alt), 
41. const Choice(title: ‘Setting’, icon: Icons.settings), 
42. const Choice(title: ‘Album’, icon: Icons.photo_album), 
43. const Choice(title: ‘WiFi’, icon: lcons.wifi), 

44. const Choice(title: 'GPS', icon: Icons.gps_fixed), 

45. |; 

46. 
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47. class SelectCard extends StatelessWidget { 

48. const SelectCard({Key key, this.choice}) : super(key: key); 

49. final Choice choice; 

50. 

51. @override 

52. Widget build(BuildContext context) { 

53. final TextStyle textStyle = Theme.of(context).textTheme.display 1; 
54. return Card( 


55. color: Colors.lightGreenAccent, 
56. child: Center(child: Column( 
57. mainAxisSize: MainAxisSize.min, 
58. crossAxisAlignment: CrossAxisAlignment.center, 
59. children: <Widget>[ 
60. Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)), 
61. Text(choice.title, style: textStyle), 
62. ] 
63. ), 
64. ) 
65. ); 
66. } 
67. } 
Output 


Now, run the app in Android Studio. You can see the following screen in your Android Emulator. 
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Creating a Horizontal List 


The ListView widget also supports horizontal lists. Sometimes we want to create a list that can scroll 
horizontally rather than vertically. In that case, ListView provides the horizontal scrollDirection that 
overrides the vertical direction. The following example explains it more clearly. Open the main.dart 
file and replace the following code. 


. import 'package:flutter/material.dart'; 


. void main() => runApp(MyApp(); 


1 
2 
3 
4. 
5. class MyApp extends StatelessWidget { 
6. @override 

7. Widget build(BuildContext context) { 

8 final title = ‘Flutter Horizontal Demo List’; 
9. 

10. return MaterialApp( 

11. title: title, 

12. home: Scaffold( 

13. appBar: AppBar( 


14. title: Text(title), 

15. ), 

16. body: Container( 

17. margin: Edgelnsets.symmetric(vertical: 25.0), 
18. height: 150.0, 

19. child: ListView( 

20. scrollDirection: Axis.horizontal, 
21. children: <Widget>[ 

22, Container( 

23. width: 150.0, 

24: color: Colors.blue, 

25. child: new Stack( 

26. children: <Widget>[ 

27. ListTile( 

28. leading: Icon(Icons.home), 
29. title: Text('Home'), 

30. ), 

31. ], 

32. ), 
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33. ), 

34. Container( 

35. width: 148.0, 

36. color: Colors.green, 

37. child: new Stack( 

38. children: <Widget>[ 
39. ListTile( 

40. leading: Icon(Icons.camera_alt), 
41. title: Text('Camera'), 
42. ), 

43. ], 

44. ) 

45. ), 

46. Container( 

47. width: 148.0, 

48. color: Colors.yellow, 
49. child: new Stack( 

50. children: <Widget>[ 
51. ListTile( 

52. leading: Icon(Icons.phone), 
53. title: Text(‘Phone’), 
54. ), 

55; ], 

56. ), 

57. ), 

58. Container( 

59. width: 148.0, 

60. color: Colors.red, 

61. child: new Stack( 

62. children: <Widget>[ 
63. ListTile( 

64. leading: Icon(Icons.map), 
65. title: Text('Map'), 
66. ), 

67. ], 

68. ), 

69. ), 

70. Container( 
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71. width: 148.0, 

72. color: Colors.orange, 
73. child: new Stack( 

74. children: <Widget>[ 
75. ListTile( 

76. leading: Icon(Icons.settings), 
77. title: Text('Setting'), 
78. ), 

79. ], 

80. ), 

81. } 

82. ], 

83. ), 

84. ), 

85., 

86. ); 

87. } 

88. } 


Output 


Now, run the app in Android Studio. !t will give the following screen where you can scroll horizontally 
to see all the lists. 


23 008. 
Flutter Horizontal Demo List 
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10. Flutter Forms: 


Forms are an integral part of all modern mobile and web applications. It is mainly used to interact 
with the app as well as gather information from the users. They can perform many tasks, which 
depend on the nature of your business requirements and logic, such as authentication of the 
user, adding user, searching, filtering, ordering, booking, etc. A form can contain text fields, 
buttons, checkboxes, radio buttons, etc. 


Creating Form 


Flutter provides a Form widget to create a form. The form widget acts as a container, which 
allows us to group and validate the multiple form fields. When you create a form, it is necessary 
to provide the GlobalKey. This key uniquely identifies the form and allows you to do any 
validation in the form fields. 


The form widget uses child widget TextFormField to provide the users to enter the text field. 
This widget renders a material design text field and also allows us to display validation errors 
when they occur. 


Let us create a form. First, create a Flutter project and replace the following code in the main.dart 
file. In this code snippet, we have created a custom class named MyCustomForm. Inside this 
class, we define a global key as _formKey. This key holds a FormState and can use to retrieve 
the form widget. Inside the build method of this class, we have added some custom style and 
use the TextFormField widget to provide the form fields such as name, phone number, date of 
birth, or just a normal field. Inside the TextFormField, we have used InputDecoration that 
provides the look and feel of your form properties such as borders, labels, icons, hint, styles, etc. 
Finally, we have added a button to submit the form. 


. import 'package:flutter/material.dart'; 
. void main() => runApp(MyApp(); 
@override 


Widget build(BuildContext context) { 


1 
2 

3 

4. 

5. class MyApp extends StatelessWidget { 
6 

7 

8 final appTitle = 'Flutter Form Demo’; 
9 


return MaterialApp( 


—_— 


0. title: appTitle, 

11. home: Scaffold( 

12. appBar: AppBar( 

13. title: Text(appTitle), 
14. ), 


15. body: MyCustomForm(), 
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19.} 

20. // Create a Form widget. 

21. class MyCustomForm extends Stateful Widget { 

22. @override 

23. MyCustomFormState createState() { 

24. return MyCustomFormState(); 

25. } 

26. } 

27.// Create a corresponding State class. This class holds data related to the form. 
28. class MyCustomFormState extends State<MyCustomForm> { 
29. // Create a global key that uniquely identifies the Form widget 
30. // and allows validation of the form. 

31. final _formKey = GlobalKey<FormState> (); 


33. @override 

34. Widget build(BuildContext context) { 

35. // Build a Form widget using the _formKey created above. 
36. return Form( 

37. key: _formKey, 

38. child: Column( 


39. crossAxisAlignment: CrossAxisAlignment.start, 
40. children: <Widget>[ 

41. TextFormField( 

42. decoration: const InputDecoration( 
43. icon: const Icon(Icons.person), 

44. hintText: 'Enter your name', 

45. labelText: 'Name', 

46. ), 

47. ), 

48. TextFormField( 

49. decoration: const InputDecoration( 
50. icon: const Icon(Icons.phone), 

51. hintText: ‘Enter a phone number”, 
52. labelText: 'Phone', 

53. ), 


s= 


MOBILE APPLICATION DEVELOPMENT - 2 





54. À 
55. TextFormField( 
56. decoration: const InputDecoration( 
57. icon: const Icon(Icons.calendar_today), 
58. hintText: 'Enter your date of birth', 
59. labelText: 'Dob', 
60. ), 
61. ), 
62. new Container( 
63. padding: const Edgelnsets.only(left: 150.0, top: 40.0), 
64. child: new RaisedButton( 
65. child: const Text('Submit'), 
66. onPressed: null, 
67. )), 
68. ], 
69.  ), 
70. +); 
71. } 
72.} 
Output 


Now, run the app, you can see the following screen in your Android Emulator. This form contains 
three field name, phone number, date of birth, and submit button. 


ssoee 


| Flutter Form Demo 
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Form validation 


Validation is a method, which allows us to correct or confirms a certain standard. It ensures the 
authentication of the entered data. 


Validating forms is a common practice in all digital interactions. To validate a form in a flutter, we 
need to implement mainly three steps. 


Step 1: Use the Form widget with a global key. 
Step 2: Use TextFormField to give the input field with validator property. 
Step 3: Create a button to validate form fields and display validation errors. 


Let us understand it with the following example. In the above code, we have to 
use validator() function in the TextFormField to validate the input properties. If the user gives the 
wrong input, the validator function returns a string that contains an error message; otherwise, the 
validator function return null. In the validator function, make sure that the TextFormField is not 
empty. Otherwise, it returns an error message. 


The validator() function can be written as below code snippets: 


1. validator: (value) { 

2 if (value.isEmpty) { 

3. return 'Please enter some text’; 
4. } 

5 return null; 

6. }, 


Now, open the main.dart file and add validator() function in the TextFormField widget. Replace the 
following code with the main.dart file. 


. import 'package:flutter/material.dart'; 


. void main() => runApp(MyApp(); 


1 
2 
3 
4. 
5. class MyApp extends StatelessWidget { 
6. @override 

7. Widget build(BuildContext context) { 

8 final appTitle = ‘Flutter Form Demo’; 
9 return MaterialApp( 

10. title: appTitle, 


11. home: Scaffold( 
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12. appBar: AppBar( 

13. title: Text(appTitle), 

14. ), 

15. body: MyCustomForm(), 


19.} 

20. // Create a Form widget. 

21. class MyCustomForm extends StatefulWidget { 

22. @override 

23. MyCustomFormState createState() { 

24. return MyCustomFormState(); 

25. } 

26. } 

27.// Create a corresponding State class, which holds data related to the form. 
28. class MyCustomFormState extends State<MyCustomForm> { 
29. // Create a global key that uniquely identifies the Form widget 
30. // and allows validation of the form: 

31. final _formKey = GlobalKey<FormState> (); 


33. @override 

34. Widget build(BuildContext context) { 

35. // Build a Form widget using the _formKey created above. 
36. return Form( 

37. key: _formKey, 

38. child: Column( 


39. crossAxisAlignment: CrossAxisAlignment.start, 
40. children: <Widget>[ 

A1. TextFormField( 

42. decoration: const InputDecoration( 
43. icon: const Icon(Icons.person), 

44. hintText: ‘Enter your full name’, 
45. labelText: ‘Name’, 

46. ) 

47. validator: (value) { 

48. if (value.isEmpty) { 

49. return ‘Please enter some text'; 
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50. } 

51. return null; 

52. } 

53. ), 

54. TextFormField( 

55. decoration: const InputDecoration( 

56. icon: const Icon(Icons.phone), 

57. hintText: ‘Enter a phone number, 

58. labelText: ‘Phone’, 

59. ), 

60. validator: (value) { 

61. if (value.isEmpty) { 

62. return 'Please enter valid phone number’; 
63. } 

64. return null; 

65. }, 

66. ), 

67. TextFormField( 

68. decoration: const InputDecoration( 

69. icon: const Icon(Icons.calendar_today), 

70. hintText: 'Enter your date of birth’, 

71. labelText: 'Dob', 

72. ), 

73. validator: (value) { 

74. if (value.isEmpty) { 

75. return 'Please enter valid date'; 

76. } 

77. return null; 

78. } 

79. M 

80. new Container( 

81. padding: const Edgelnsets.only(left: 150.0, top: 40.0), 
82. child: new RaisedButton( 

83. child: const Text('Submit'), 

84. onPressed: () { 

85. // \t returns true if the form is valid, otherwise returns false 
86. if (formKey.currentState.validate()) { 

87. // \f the form is valid, display a Snackbar. 
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88. Scaffold.of(context) 
89. .ShowSnackBar(SnackBar(content: Text('Data is in processing.’))); 


97.} 
Output 


Now, run the app. The following screen appears. 


| 
s5 0. 


Flutter Form Demo 





In this form, if you left any input field blank, you will get an error message like below screen. 
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11. Flutter Alert Dialogs: 


An alert dialog is a useful feature that notifies the user with important information to make a 
decision or provide the ability to choose a specific action or list of actions. It is a pop-up box that 
appears at the top of the app content and the middle of the screen. It can be dismissed manually 
by the user before resuming interaction with the app. 


An alert can be thought of as a floating modal which should be used for a quick response such 
as password verification, small app notifications, and many more. The alerts are very flexible and 
can be customized very easily. 


In Flutter, the AlertDialog is a widget, which informs the user about the situations that need 
acknowledgment. The Flutter alert dialog contains an optional title that displayed above the 
content and list of actions displayed below the content. 


Properties of Alert Dialog 
The main properties of the AlertDialog widget are: 
Title: This property gives the title to an AlertDialog box that occupies at the top of the AlertDialog. 


Itis always good to keep the title as short as possible so that the user knows about its use very easily. 
We can write the title in AlertDialog as below: 


1. AlertDialog(title: Text("Sample Alert Dialog"), 


Action: It displays below the content. For example, if there is a need to create a button to choose 
yes or no, then it is defined in the action property only. We can write an action attribute in AlertDialog 
as below: 
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1. actions: <Widget>[ 

2 FlatButton(child: Text("Yes"),), 
3. FlatButton(child: Text("No"),) 
4 


. 1) 


Content: This property defines the body of the AlertDialog widget. It is a type of text, but it can also 
hold any kind of layout widgets. We can use the Content attribute in AlertDialog as below: 


1. actions: <Widget>[ 

2 FlatButton(child: Text("Yes"),), 
3. FlatButton(child: Text("No"),) 
4 
5 


» D 
. content: Text("It is the body of the alert Dialog"), 


ContentPadding: It gives the padding required for the content inside the AlertDialog widget. We 
can use ContentPadding attribute in AlertDialog as below: 


1. contentPadding: Edgelnsets.all(32.0), 


Shape: This attribute provides the shape to the alert dialog box, such as curve, circle, or any other 
different shape. 


1. shape: CircleBorder(), 
2. shape: CurveBorder(), 


We can categories the alert dialog into multiple types, which are given below: 


1. Basic AlertDialog 

2. Confirmation AlertDialog 
3. Select AlertDialog 

4. TextField AlertDialog 


Basic AlertDialog 


This alert notifies the users about new information, such as a change in the app, about new features, 
an urgent situation that requires acknowledgment, or as a confirmation notification to the user that 
an action was successful or not. The following example explains the use of basic alerts. 


Example 


Create a Flutter project in Android Studio and replace the following code with main.dart file. To 
show an alert, you must have to call showDialog() function, which contains the context 
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and itemBuilder function. The itemBuilder function returns an objectof type dialog, the 
AlertDialog. 


. import 'package:flutter/material.dart'; 


. void main() => runApp(MyApp(); 


1 
2 
3 
4. 
5. class MyApp extends StatelessWidget { 
6. @override 

7. Widget build(BuildContext context) { 

8 final appTitle = ‘Flutter Basic Alert Demo’; 
9. return MaterialApp( 

10. title: appTitle, 

11. home: Scaffold( 

12, appBar: AppBar( 

13. title: Text(appTitle), 

14. ), 

15. body: MyAlert(), 

16. )i 

17. À 

18. } 

19. } 

20. 

21. class MyAlert extends StatelessWidget { 
22. @override 

23. Widget build(BuildContext context) { 
24. return Padding( 

25; padding: const Edgelnsets.all(20.0), 
26. child: RaisedButton( 

27. child: Text(‘Show alert’), 

28. onPressed: () { 

29. showAlertDialog(context); 


34. } 
35: 


36. showAlertDialog(BuildContext context) { 
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37. // Create button 

38. Widget okButton = FlatButton( 
39. child: Text("OK"), 

40. onPressed: () { 

41. Navigator.of(context).pop(); 
42. }, 

43. À 


45. // Create AlertDialog 

46. AlertDialog alert = AlertDialog( 

47. title: Text("Simple Alert"), 

48. content: Text("This is an alert message."), 
49. actions: [ 

50. okButton, 

51. ], 

52. } 


54. // show the dialog 

55. showDialog( 

56. context: context, 

57. builder: (BuildContext context) { 
58. return alert; 

59 VE 

60. ); 

61.} 


Output 


Now, run the app, it will give the following output. When you click on the button Show Alert, you 
will get the alert message. 
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TextField AlertDialog 


This AlertDialog makes it able to accept user input. In the following example, we are going to add 
text field input in the alert dialog. Open the main.dart file and insert the following code. 


. import 'package:flutter/material.dart'; 


. void main() => runApp(MyApp(); 


1 
2 
3 
4. 
5. class MyApp extends StatelessWidget { 
6. // This widget is the root of your application. 

7. @override 

8. Widget build(BuildContext context) { 

9. return MaterialApp( 

10. title: ‘Flutter Alert Demo’, 

11. debugShowCheckedModeBanner: false, 

12. theme: ThemeData( 

13. primarySwatch: Colors.blue, 

14. ), 

15. //home: MyHomePaget(title: ‘Flutter Demo Home Page’), 
16. home: TextFieldAlertDialog(), 

17. y; 


18. } 


237 = 


19 
20 
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et 
. Class TextFieldAlertDialog extends StatelessWidget { 
TextEditingController _textFieldController = TextEditingController(); 


22, 


23. 
24. 
25. 
26. 
27. 
28. 
29. 
30. 
31. 
32. 
33. 
34. 
35. 
36. 
37. 
38. 
39. 
40. 
41. 
42. 
43. 


_displayDialog(BuildContext context) async { 
return showDialog( 
context: context, 
builder: (context) { 
return AlertDialog( 
title: Text('TextField AlertDemo’), 
content: TextField( 
controller: _textFieldController, 
decoration: InputDecoration(hintText: "TextField in Dialog"), 
), 
actions: <Widget>[ 
new FlatButton( 
child: new Text('SUBMIT"), 


onPressed: () { 


44. 


45. 
46. 
47. 
48. 
49. 
50. 
51. 
52. 
53. 
54. 
55. 
56. 


Navigator.of(context).pop(); 
}, 
) 
], 
); 
D; 
} 
@override 


Widget build(BuildContext context) { 
return Scaffold( 
appBar: AppBar( 
title: Text(TextField AlertDialog Demo’), 
) 
body: Center( 
child: FlatButton( 
child: Text( 
'Show Alert', 
style: TextStyle(fontSize: 20.0),), 
padding: Edgelnsets.fromLTRB(20.0,12.0,20.0,12.0), 
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57. shape: RoundedRectangleBorder( 

58. borderRadius: BorderRadius.circular(8.0) 
59. ), 

60. color: Colors.green, 

61. onPressed: () => _displayDialog(context), 


66. } 
Output 


Now, run the app, it will give the following output. When you click on the button Show Alert, you 
will get the text input alert message. 


2.0.4 


TextField AlertDialog Demo 


TextField AlertDemo 





Confirmation AlertDialog 


The confirmation alert dialog notifies a user to confirm a particular choice before moving forward in 
the application. For example, when a user wants to delete or remove a contact from the address 
book. 


Example 


. import 'package:flutter/material.dart'; 


1 
2. 
3. void main() { 
4. runApp(new MaterialApp(home: new MyApp())); 
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5 

6. 

7. class MyApp extends StatelessWidget { 
8. // This widget is the root of your application. 
9. @override 

10. Widget build(BuildContext context) { 

11. // TODO: implement build 

12. return new Scaffold( 

13. appBar: AppBar( 

14. title: Text("Confirmation AlertDialog"), 
15. ), 

16. body: Center( 

17. child: Column( 


18. mainAxisAlignment: MainAxisAlignment.center, 
19. children: <Widget>[ 

20. new RaisedButton( 

21. onPressed: () async { 

22. final ConfirmAction action = await _asyncConfirmDialog(context); 
23. print("Confirm Action $action" ); 

24. }, 

25. child: const Text( 

26. "Show Alert", 

27. style: TextStyle(fontSize: 20.0),), 

28. padding: Edgelnsets.fromLTRB(30.0,10.0,30.0,10.0), 
29. shape: RoundedRectangleBorder( 

30. borderRadius: BorderRadius.circular(8.0) 
31. ), 

32. color: Colors.green, 

33. } 

34. hr 

35. ), 

36% ), 

B7. y 

38. } 

39. } 


40. enum ConfirmAction { Cancel, Accept} 
41. Future<ConfirmAction> _asyncConfirmDialog(BuildContext context) async { 


42. return showDialog<ConfirmAction > ( 
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43. context: context, 

44.  barrierDismissible: false, // user must tap button for close dialog! 
45. builder: (BuildContext context) { 

46. return AlertDialog( 


47. title: Text(‘Delete This Contact?’), 
48. content: const Text( 
49. ‘This will delete the contact from your device), 
50. actions: <Widget>[ 
51. FlatButton( 
52. child: const Text('Cancel’), 
53. onPressed: () { 
54. Navigator.of(context).pop(ConfirmAction.Cancel); 
55. }, 
56. ), 
57. FlatButton( 
58. child: const Text('Delete'), 
59. onPressed: () { 
60. Navigator.of(context).pop(ConfirmAction.Accept); 
61. }, 
62. ) 
63. ], 
64. ); 
65. }, 
66. ); 
67.} 
Output 


When you run the app, it will give the following output. Now, click on the button Show Alert, you 
will get the confirmation alert box message. 
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Select Option AlertDialog 


This type of alert dialog displays the list of items, which takes immediate action when selected. 


Example 


. import 'package:flutter/material.dart'; 


1 
2 

3. void main() { 

4. runApp(new MaterialApp(home: new MyAppO)); 
5. | 

6. 

7. class MyApp extends StatelessWidget { 

8. // This widget is the root of your application. 

9. @override 

10. Widget build(BuildContext context) { 

11. // TODO: implement build 

12. -return new Scaffold( 

+ appBar: AppBar( 

14. title: Text("Select Option AlertDialog"), 

15. ), 

16. body: Center( 

17. child: Column( 


18. mainAxisAlignment: MainAxisAlignment.center, 
19. children: <Widget>[ 
20. new RaisedButton( 
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21. onPressed: () async { 

22. final Product prodName = await _asyncSimpleDialog(context); 
23. print("Selected Product is $prodName"); 
24. }, 

25. child: const Text( 

26. "Show Alert", 

27. style: TextStyle(fontSize: 20.0),), 

28. padding: Edgelnsets.fromLTRB(30.0,10.0,30.0,10.0), 
29. shape: RoundedRectangleBorder( 

30. borderRadius: BorderRadius.circular(8.0) 
31. ), 

32. color: Colors.green, 

33. ), 

34. ], 

35. ), 

36 ), 

37, À} 

38. } 

39.} 

40. enum Product { Apple, Samsung, Oppo, Redmi } 

41. 


42. Future <Product> _asyncSimpleDialog(BuildContext context) async { 
43. return await showDialog<Product>( 

44. context: context, 

A5. barrierDismissible: true, 

46. builder: (BuildContext context) { 

47. return SimpleDialog( 


48. title: const Text('Select Product '), 

49. children: <Widget>[ 

50. SimpleDialogOption( 

51. onPressed: () { 

52. Navigator.pop(context, Product.Apple); 
53. } 

54. child: const Text(‘Apple’), 

55. ), 

56. SimpleDialogOption( 

57. onPressed: () { 

58. Navigator.pop(context, Product.Samsung); 
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59. } 
60. child: const Text('Samsung'), 
61. ), 
62. SimpleDialogOption( 
63. onPressed: () { 
64. Navigator.pop(context, Product.Oppo); 
65. } 
66. child: const Text('Oppo'), 
67. ), 
68. SimpleDialogOption( 
69. onPressed: () { 
70. Navigator.pop(context, Product.Redmi); 
71. }, 
72. child: const Text(‘Redmi’), 
73. ), 
74. ], 
75. ); 
76. X 
77.} 
Output 


When you run the app, it will give the following output. Now, click on the button Show Alert, you 
will get the select option alert box message. As soon as you select any of the available options, the 
alert message disappears, and you will get a message of the selected choice in the console. 
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12. Flutter Tooltip: 


A tooltip is a material design class in Flutter that provides text labels to explain the 
functionality of a button or user interface action. In other words, it is used to show additional 
information when the user moves or points over a particular widget. It increases the accessibility of 
our application. If we wrap the widget with it, then it is very useful when the user long presses the 
widget because, in that case, it appears as a floating label. 


Properties: 

The following are the properties used to customize the application. 

message: It is a string message used to display in the tooltip. 

height: It is used to specify the height of the tooltip's child. 

textStyle: It is used to determine the style for the message of the tooltip. 

margin: It is used to determine the empty space surrounds the tooltip. 

showDuration: It is used to specify the length of time for showing the tooltip after a long press is 
released. By default, it is 1.5 seconds. 

decoration: It is used to define the shape and background color of the tooltip. The default tooltip 
shape is a rounded rectangle that has a border-radius of 4.0 PX. 

verticalOffset: It determines the vertical gap between the tooltip and the widget. 

waitDuration: It is used to specify the time when a pointer hovers over a tooltip's widget before 
showing the tooltip. When the pointer leaves the widget, the tooltip message will be disappeared. 
padding: It determines the space to inset the tooltip's child. By default, it is 16.0 PX in all directions. 
preferBelow: It is used to specify whether the tooltip is being displayed below the widget or not. By 
default, it is true. The tooltip will be displayed in the opposite direction if we have not sufficient 


space to display the tooltip in the preferred direction. 


How to use Tooltip Widget in Flutter? 


We can use the tooltip in Flutter as the below code: 





Tooltip( 
message: ‘User Account’, 
child: IconButton( 
icon: Icon(Icons.high_quality), 
onPressed: () { 


MED pe 


/* your code */ 
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Output 
Example 


Let us understand it with the help of an example where we are trying to cover most of the above 
properties. In the following example, we are going to use a FlatButton with Icon as a child and 
surround this button with a tooltip. If we long press on this button, it will display a label with the 
message provided for the tooltip widget. 


. import 'package:flutter/material.dart'; 


. void main( {runApp(MyApp();} 


1 
2 
3 
4. 
5. class MyApp extends StatelessWidget { 
6. @override 

7. Widget build(BuildContext context) { 

8 return MaterialApp( 

9. home: MyHomePage() 


13. 

14. class MyHomePage extends StatefulWidget { 

15. @override 

16. _MyHomePageState createState() => _MyHomePageState(); 
17.3} 

18. 

19. class _MyHomePageState extends State<MyHomePage> { 
20. @override 

21. Widget build(BuildContext context) { 

22. return Scaffold( 

23, appBar: AppBar( 


24. title: Text("Flutter Tooltip Example"), 

29 À 

26. body: Row( 

27. mainAxisAlignment: MainAxisAlignment.spaceEvenly, 


p= 
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64. } 


Output: 


children:<Widget>[ 
Container( 
margin: Edgelnsets.all(10), 
child: Tooltip( 
waitDuration: Duration(seconds: 1), 
showDuration: Duration(seconds: 2), 
padding: Edgelnsets.all(5), 
height: 35, 
textStyle: TextStyle( 
fontSize: 15, color: Colors.white, fontWeight: FontWeight.normal), 
decoration: BoxDecoration( 
borderRadius: BorderRadius.circular(10), color: Colors.green), 
message: ‘My Account’, 
child: FlatButton( 
child: Icon( 
Icons.account_box, 


size: 100, 
), 
)), 
), 
Container( 


margin: Edgelnsets.all(10), 
child: Tooltip( 
message: 'My Account’, 
child: FlatButton( 
child: Icon( 
lcons.account_box, 
size: 100, 
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When we run the app in our IDE, we will see the UI as below screenshot: 

















If we long-press the icon, we will see the tooltip as below screenshot. 
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Flutter Tooltip Example 
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13. Flutter Toast: 


Flutter Toast is also called a Toast Notification message. It is a very small message which mainly 
popup at the bottom of the device screen. It will disappear on its own after completing the time 
provided by the developers. A developer mostly used the toast notification for showing feedback 
on the operation performed by the user. 


Showing toast notification message is an essential feature in android applications. We can achieve 
it by using simple lines of code. In this section, we are going to learn how to show toast message 
in android and iOS by implementing it in Flutter. To implement toast notification, we need to 
import fluttertoast library in Flutter. 


The following steps are needed to show toast notification in Flutter: 


o Create a Flutter Project 
o Add the Flutter Toast Dependencies in project 
o Import the fluttertoast dart package in library 


o Implement the code for showing toast message in Flutter 


Flutter provides several properties to the user for showing the toast message, which is given below: 


Property Description 

msg String(Required) 

toastlength Toast.LENGTH_SHORT or Toast.LENGTH_LONG 

gravity ToastGravity. TOP or ToastGravity.CENTER or ToastGravity.BOTTOM 
timelnSecForlos It is used only for los ( 1 sec or more) 

backgroundColor It specifies the background color. 

textColor It specifies text color. 

fontSize It specifies the font size of the notification message. 


FlutterToast.cancel(): This function is used when you want to cancel all the requests to show 
message to the user. 


Let us see how we can show toast notification in the Flutter app through the following steps: 
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Step 1: Create a Flutter project in the IDE. Here, | am going to use Android Studio. 


Step 2: Open the project in Android Studio and navigate to the lib folder. In this folder, open 
the pubspec.yamll file. Here, we need to add the flutter toast library in the dependency section and 
then click on get package link to import the library in your main.dart file. 


pubspec.yaml 


1. dependencies: 

2. flutter: 

3.  sdk: flutter 

4. cupertino_icons: “0.1.2 
5.  fluttertoast: “3.1.0 


It ensures that while adding the dependencies, you have left two spaces from the left side of a 
fluttertoast dependency. The fluttertoast dependency provides the capability to show toast 
notification in a simple way. It can also customize the look of the toast popup very easily. 


Step 3: Open the main.dart file and create a toast notification in the widget as the code given 
below. 


1. Fluttertoast.showToast( 

2 msg: 'This is toast notification’, 

3 toastLength: Toast.LENGTH_SHORT, 
4. gravity: ToastGravity.BOTTOM, 

5. timelnSecForlos: 1, 

6 backgroundColor: Colors.red, 

7 textColor: Colors.yellow 

8 


); 


Let us see the complete code of the above steps. Open the main.dart file and replace the following 
code. This code contains a button, and when we pressed on this, it will display the toast message by 
calling FlutterToast.showToast. 


. import 'package:flutter/material.dart'; 
. import 'package:fluttertoast/fluttertoast.dart'; 


@override 


1 
2 
B. 
4. class ToastExample extends StatefulWidget { 
5 
6. _ToastExampleState createState() { 

7 


return _ToastExampleState(); 
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11. class _ToastExampleState extends State { 
12. void showToast() { 

13.  Fluttertoast.showToast( 

14. msg: ‘This is toast notification’, 

15: toastLength: Toast.LENGTH_SHORT, 
16. gravity: ToastGravity. BOTTOM, 


17. timelnSecForlos: 1, 

18. backgroundColor: Colors.red, 
19. textColor: Colors.yellow 

20. À} 

21. } 

22. 


23. @override 

24. Widget build(BuildContext context) { 
25. return MaterialApp( 

26. title: Toast Notification Example’, 
27. home: Scaffold( 


28. appBar: AppBar( 

29. title: Text('Toast Notification Example’), 
30. ), 

31. body: Padding( 

32. padding: Edgelnsets.all(15.0), 
33. child: Center( 

34. child: RaisedButton( 

35. child: Text('click to show’), 
36. onPressed: showToast, 

Bye ), 

38. ), 

39. ) 

A0. ), 

Al, À} 

42. } 

43.} 

44. 
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45. void main() => runApp(ToastExample()); 
Output 


Now, run the app in Android Studio. It will give the following screen. 


Toast Notification Example 





When we click on the "click to show" button, we can see the toast message at the bottom of the 
screen. See the below image: 


20 006 


Toast Notification Example 
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14. Flutter Switch: 


A switch is a two-state user interface element used to toggle between ON (Checked) or OFF 
(Unchecked) states. Typically, it is a button with a thumb slider where the user can drag back and 
forth to choose an option in the form of ON or OFF. Its working is similar to the house electricity 


switches. 


In Flutter, the switch is a widget used to select between two options, either ON or OFF. It does not 
maintain the state itself. To maintain the states, it will call the onChanged property. If the value 
return by this property is true, then the switch is ON and false when it is OFF. When this property is 
null, the switch widget is disabled. In this article, we are going to understand how to use a switch 
widget in the Flutter application. 


Properties of Switch Widget 


Some of the essential attributes of switch widget are given below: 


Attributes 


onChanged 


value 


activeColor 


activeTrackColor 


inactiveThubmColor 


inactiveTrackColor 


dragStartBehavior 


Example 


Descriptions 


It will be called whenever the user taps on the switch. 


It contains a Boolean value true or false to control whether the switch functionality is ON 
or OFF: 


It is used to specify the color of the switch round ball when it is ON. 


It specifies the switch track bar color. 


It is used to specify the color of the switch round ball when it is OFF. 


It specifies the switch track bar color when it is OFF. 


It handled the drag start behavior. If we set it as DragStartBehavior.start, the drag moves 
the switch from on to off. 


In this application, we have defined a switch widget. Every time we toggled the switch widget, the 
onChanged property is called with a new state of the switch as value. To store the switch state, we 
have defined a boolean variable isSwitched that can be shown in the below code. 
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Open the IDE you are using, and create a Flutter application. Next, open the lib folder and 
replace main.dart with the following code. 


. import 'package:flutter/material.dart'; 


. void main() => runApp(MyApp(); 


@override 
Widget build(BuildContext context) { 


1 
2 
3 
4. 
5. class MyApp extends StatelessWidget { 
6 
7 
8 return MaterialApp( 


9. home: Scaffold( 

10. appBar: AppBar( 

11. backgroundColor: Colors.blue, 
12. title: Text("Flutter Switch Example"), 
13. ), 

14. body: Center( 

15. child: SwitchScreen() 

16. ) 

17. ) 

18. ) 

19. } 

20. } 

21. 


22. class SwitchScreen extends StatefulWidget { 

23. @override 

24. SwitchClass createState() => new SwitchClass(); 
25: } 

26. 

27. class SwitchClass extends State { 

28. bool isSwitched = false; 

29. var textValue = ‘Switch is OFF’; 


30. 

31. void toggleSwitch(bool value) { 
32. 

33.  if(isSwitched == false) 

34. { 


35. setState(() { 
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36. isSwitched = true; 

37. textValue = ‘Switch Button is ON’; 
38. J; 

39. print('Switch Button is ON’); 

40. } 

41. else 

42. { 

43. setState(() { 

44. isSwitched = false; 

45. textValue = 'Switch Button is OFF'; 
46. p; 

47. print('Switch Button is OFF'); 

48. } 

49. } 


50. @override 
51. Widget build(BuildContext context) { 


52. return Column( 


53. mainAxisAlignment: MainAxisAlignment.center, 
54. children:[ Transform.scale( 
55. scale: 2, 
56. child: Switch( 
57. onChanged: toggleSwitch, 
58. value: isSwitched, 
59. activeColor: Colors.blue, 
60. activeTrackColor: Colors.yellow, 
61. inactiveThumbColor: Colors.redAccent, 
62. inactiveTrackColor: Colors.orange, 
63. ) 
64. ), 
65. Text(‘$textValue’, style: TextStyle(fontSize: 20),) 
66. D; 
67. } 
68. } 
Output: 


When we run the application in the emulator or device, we should get UI similar to the following 
screenshot 
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Switch Button is OFF 





250 004 


Flutter Switch Example 








Switch Button is ON 





How to customize the Switch button in Flutter? 

Flutter also allows the user to customize their switch button. Customization makes the user interface 
more interactive. We can do this by adding the custom-switch dependency in 
the pubspec.yaml file and then import it into the dart file. 


Example: 


Open the main.dart file and replace it with the following code: 


1. import 'package:flutter/material.dart’; 
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. import 'package:custom_switch/custom_switch.dart’; 


. void main() => runApp(MyApp(); 


@override 
Widget build(BuildContext context) { 
return MaterialApp( 
10. home: Scaffold( 
11. appBar: AppBar( 


2 
3 
4 
5. 
6. class MyApp extends StatelessWidget { 
7 
8 
9 


12. backgroundColor: Colors.blue, 

13. title: Text("Custom Switch Example"), 
14. ), 

15. body: Center( 

16. child: SwitchScreen() 


21.} 

22. 

23. class SwitchScreen extends StatefulWidget { 
24. @override 

25. SwitchClass createState() => new SwitchClass(); 
26. } 

27. 

28. class SwitchClass extends State { 

29. bool isSwitched = false; 

30. @override 

31. Widget build(BuildContext context) { 

32. return Column( 


33. mainAxisAlignment: MainAxisAlignment.center, 
34. children:<Widget>[ 

35. CustomSwitch( 

36. value: isSwitched, 

37. activeColor: Colors.blue, 

38. onChanged: (value) { 
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39. print("VALUE : $value"); 
40. setState(() { 

41. isSwitched = value; 
42. }); 

A3, } 

44. }, 

45. SizedBox(height: 15.0,), 

46. Text('Value : $isSwitched’, style: TextStyle(color: Colors.red, 
47. fontSize: 25.0),) 

48. D; 

49. } 

50. } 


Output:When we run the application in the emulator or device, we should get UI similar to the 
following screenshot: 
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15. Flutter Charts: 


A chart is a graphical representation of data where data is represented by a symbol such as a line, 
bar, pie, etc. In Flutter, the chart behaves the same as a normal chart. We use a chart in Flutter 
to represent the data in a graphical way that allows the user to understand them in a simple 
manner. We can also plot a graph to represents the rise and fall of our values. The chart can easily 
read the data and helps us to know the performance on a monthly or yearly basis whenever we need 
it. 


Supported Chart Types in Flutter 


Flutter supports mainly three types of charts, and each chart comes with several configuration 
options. The following are the chart used in Flutter application: 


1. Line Chart 
2. Bar Chart 
3. Pie and Donut Chart 


Line Chart 


A line chart is a graph that uses lines for connecting individual data points. It displays the information 
in a series of data points. It is mainly used to track changes over a short and long period of time. 


We can use it as below: 


1. LineChart( 
2.  LineChartDatal 
3.  // write your logic 
4. ), 
5. ); 
Bar Chart 


It is a graph that represents the categorical data with rectangular bars. It can be horizontal or vertical. 


We can use it as below: 


. BarChart( 
BarChartData( 


), 


1 
2 
3.  // write your logic 
4 
5. ); 
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Pie or Donut Chart 


It is a graph that displays the information in a circular graph. In this graph, the circle is divided into sectors, 
and each shows the percentage or proportional data. 


We can use it as below: 


. PieChart( 
PieChartData( 


), 


1 
2 
3. // write your logic 
4 
5. ); 


Let us understand it with the help of an example. 


Example 


Open the IDE and create the new Flutter project. Next, open the project, navigate to the lib folder, and open 
the pubspec.yaml file. In this file, we need to add the chart dependency. Flutter provides several chart 
dependency, and here we are going to use fl_chart dependency. So add it as below: 


1. dependencies: 

2. flutter: 

3. sdk: flutter 

4. fl_chart: 10.10.1 


After adding the dependency, click on the get packages link shown on the screen's top left corner. Now, 
open the main.dart file and replace it with the below code: 


import 'package:flutter/material.dart'; 


import 'package:fl_chart/fl_chart.dart'; 
void main() => runApp(MyApp()); 


/// This Widget is the main application widget. 
class MyApp extends StatelessWidget { 
@override 
Widget build(BuildContext context) { 
10. return MaterialApp( 
11. home: HomePage(), 
12. ); 


13. 4 
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14. } 

15. 

16. class HomePage extends StatelessWidget { 
17. @override 

18. Widget build(BuildContext context) { 

19. return Scaffold( 

20. appBar: AppBar( 


21. title: const Text(Flutter Chart Example’), 
22. backgroundColor: Colors.green 
23. ), 


24. body: Center 
25. child: Column( 


26. mainAxisAlignment: MainAxisAlignment.center, 
27. children: <Widget>[ 

28. LineCharts(), 

29. Padding( 

30. padding: const Edgelnsets.all(16.0), 
31. child: Text( 

32. "Traffic Source Chart", 

33. style: TextStyle( 

34. fontSize: 20, 

33; color: Colors.purple, 

36. fontWeight: FontWeight.w700, 
34: fontStyle: FontStyle.italic 
38. ) 

39. ) 

40. ), 

41. iF 

42. ), 

43. D 

44. ); 

45. } 

46. } 

47. 


48. class LineCharts extends StatelessWidget { 
49. @override 
50. Widget build(BuildContext context) { 
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51. const cutOffY Value = 0.0; 

52. const yearTextStyle = 

53. TextStyle(fontSize: 12, color: Colors.black); 
54. 

55. return SizedBox( 

56. width: 360, 

57. height: 250, 

58. child: LineChart( 

59. LineChartData( 


60. lineTouchData: LineTouchData(enabled: false), 
61. lineBarsData: [ 

62. LineChartBarData( 

63. spots: [ 

64. FlSpot(O, 1), 

65. FlSpot(1, 1), 

66. FISpot(2, 3), 

67. FlSpot(3, 4), 

68. FlSpot(3, 5), 

69. FlSpot(4, 4) 

70. ], 

71. isCurved: true, 

72. barWidth: 2, 

73. colors: [ 

74. Colors.black, 

75. ], 

76. belowBarData: BarAreaData( 

77. show: true, 

78. colors: [Colors.lightBlue.withOpacity(0.5)], 
79. cutOffY: cutOffY Value, 

80. applyCutOffY: true, 

81. ), 

82. aboveBarData: BarAreaData( 

83. show: true, 

84. colors: [Colors.lightGreen.withOpacity(0.5)], 
85. cutOffY: cutOffY Value, 

86. applyCutOffY: true, 

87. ), 
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88. dotData: FIlDotData( 

89. show: false, 

90. ), 

91. ), 

92. ], 

93. minŸ: 0, 

94. titlesData: FITitlesData( 

95. bottomTitles: SideTitles( 

96. showTitles: true, 

97. reservedSize: 5, 

98. textStyle: yearTextStyle, 

99, getTitles: (value) { 

100. switch (value.tolnt()) { 
101. case 0: 

102. return '2016'; 

103. case 1: 

104. return '2017'; 

105. case 2: 

106. return '2018'; 

107. case 3: 

108. return '2019'; 

109. case 4: 

110. return ‘2020'; 

111. default: 

112. return"; 

113. } 

114. }, 

115. leftTitles: SideTitles( 
116. showTitles: true, 

MT getTitles: (value) { 
118. return '\$ S{value + 100}'; 
119. b 

120. ), 

121. ), 

122. axisTitleData: FlAxisTitleData( 
123. leftTitle: AxisTitle(showTitle: true, titleText: 'Value', margin: 10), 
124. bottomTitle: AxisTitle( 
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125, showTitle: true, 
126. margin: 10, 
127. titleText: 'Year', 
128. textStyle: yearTextStyle, 
129. textAlign: TextAlign.right)), 
130. gridData: FlGridData( 
131. show: true, 
132. checkToShowHorizontalLine: (double value) { 
133. return value == 1 || value == 2 || value == 3 || value == 4; 
134. } 
135. ), 
136. ), 
137. ), 
138. ); 
139. } 
140. } 
Output: 


When we run the app in the device or emulator, we will get the UI of the screen similar to the below 
screenshot: 


Flutter Chart Example 








Traffic Source Chart 
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